mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-29 18:48:32 +08:00
docs: add icon search input (#6828)
* docs: add icon search input * docs: add affix for search input
This commit is contained in:
parent
42608a5121
commit
6ced156342
@ -5,7 +5,7 @@
|
||||
ref="inputRef"
|
||||
:placeholder="searchPlaceholder"
|
||||
@focus="triggerFocus(true)"
|
||||
@blue="triggerFocus(false)"
|
||||
@blur="triggerFocus(false)"
|
||||
></a-input>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -46,11 +46,6 @@ a {
|
||||
&:hover &-inner {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
> div,
|
||||
> div > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
|
@ -86,3 +86,17 @@ ul.anticons-list {
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.icons-affix {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.icons-affixed {
|
||||
padding: 12px;
|
||||
margin: -8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color-base);
|
||||
background-color: var(--body-background);
|
||||
}
|
||||
|
@ -22,8 +22,8 @@ const allIcons = AntdIcons;
|
||||
const kebabCase = function kebabCase(str) {
|
||||
return str
|
||||
.split(/(?=[A-Z])/)
|
||||
.join('-')
|
||||
.toLowerCase();
|
||||
.map(s => s.replace(s[0], s[0].toUpperCase()))
|
||||
.join('');
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
|
@ -24,13 +24,17 @@ const IconDisplay = defineComponent({
|
||||
data() {
|
||||
return {
|
||||
theme: ThemeType.Outlined,
|
||||
searchVal: '',
|
||||
searchBarAffixed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChangeTheme(e) {
|
||||
this.theme = e.target.value;
|
||||
},
|
||||
|
||||
handleAffixChange(affixed) {
|
||||
this.searchBarAffixed = affixed;
|
||||
},
|
||||
renderCategories() {
|
||||
const { theme } = this;
|
||||
|
||||
@ -42,7 +46,10 @@ const IconDisplay = defineComponent({
|
||||
category: key,
|
||||
icons: iconList
|
||||
.map(iconName => iconName + theme)
|
||||
.filter(iconName => allIcons[iconName]),
|
||||
.filter(iconName => {
|
||||
if (iconName.toLowerCase().includes(this.searchVal.trim().toLowerCase()))
|
||||
return allIcons[iconName];
|
||||
}),
|
||||
};
|
||||
})
|
||||
.filter(({ icons }) => !!icons.length)
|
||||
@ -62,18 +69,31 @@ const IconDisplay = defineComponent({
|
||||
return (
|
||||
<div>
|
||||
<h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
|
||||
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
|
||||
<a-radio-button value={ThemeType.Outlined}>
|
||||
<Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
|
||||
</a-radio-button>
|
||||
<a-radio-button value={ThemeType.Filled}>
|
||||
<Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
|
||||
</a-radio-button>
|
||||
<a-radio-button value={ThemeType.TwoTone}>
|
||||
<Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
{this.renderCategories()}
|
||||
<a-affix offset-top={32} onChange={this.handleAffixChange}>
|
||||
<div class={this.searchBarAffixed ? 'icons-affix icons-affixed' : 'icons-affix'}>
|
||||
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
|
||||
<a-radio-button value={ThemeType.Outlined}>
|
||||
<Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
|
||||
</a-radio-button>
|
||||
<a-radio-button value={ThemeType.Filled}>
|
||||
<Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
|
||||
</a-radio-button>
|
||||
<a-radio-button value={ThemeType.TwoTone}>
|
||||
<Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search
|
||||
style="flex: 1 1 0%; margin-inline-start: 16px;"
|
||||
placeholder={this.$t('app.docs.components.icon.search.placeholder')}
|
||||
v-model:value={this.searchVal}
|
||||
/>
|
||||
</div>
|
||||
</a-affix>
|
||||
{this.renderCategories().length === 0 ? (
|
||||
<a-empty style="padding: 12px 0;" />
|
||||
) : (
|
||||
this.renderCategories()
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user