ContentSearchButton 组件用于打开 ContentSearch 模态框。
<template>
<UContentSearchButton />
</template>
它继承自 Button 组件，因此你可以传递任何属性，例如 color、variant、size 等。
<template>
<UContentSearchButton variant="subtle" />
</template>
使用 collapsed 属性显示按钮的标签和键盘按键。默认为 true。
<template>
<UContentSearchButton :collapsed="false" />
</template>
使用 kbds 属性在按钮中显示键盘按键。默认为 ['meta', 'K']，以匹配 ContentSearch 组件的默认快捷方式。
<template>
<UContentSearchButton :collapsed="false" :kbds="['alt', 'O']" />
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'button' | any此组件在不是链接时应呈现的元素或组件。 |
图标 | appConfig.ui.icons.search | any按钮中显示的图标。 |
label | t('contentSearchButton.label') | string按钮中显示的标签。 |
color | 'neutral' | "错误" | "中性" | "主要" | "次要" | "成功" | "信息" | "警告"按钮的颜色。 |
variant | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"按钮的变体。未折叠时默认为 'outline'，折叠时默认为 'ghost'。 | |
collapsed | true | boolean按钮是否折叠。 |
tooltip | false | boolean | TooltipProps当按钮折叠时，显示带有按钮标签的工具提示。这优先于全局
|
键盘按键 | ["meta", "k"] | (string | undefined)[] | KbdProps[]要在按钮中显示的键盘按键。
|
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
type | 'button' | "reset" | "submit" | "button"当不是链接时，按钮的类型。 |
activeColor | "错误" | "中性" | "主要" | "次要" | "成功" | "信息" | "警告" | |
activeVariant | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link" | |
尺寸 | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
正方形 | boolean以四边等距内边距渲染按钮。 | |
block | boolean渲染全宽按钮。 | |
loadingAuto | boolean根据 | |
avatar | AvatarProps在左侧显示头像。
| |
前置 | boolean当为 | |
leadingIcon | any在左侧显示图标。 | |
尾部 | boolean当为 | |
trailingIcon | any在右侧显示图标。 | |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
ui | { base?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }
|
| 插槽 | 类型 |
|---|---|
前置 | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
default | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
尾部 | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
export default defineAppConfig({
ui: {
contentSearchButton: {
slots: {
base: '',
label: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
},
variants: {
collapsed: {
true: {
label: 'hidden',
trailing: 'lg:hidden'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
contentSearchButton: {
slots: {
base: '',
label: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
},
variants: {
collapsed: {
true: {
label: 'hidden',
trailing: 'lg:hidden'
}
}
}
}
}
})
]
})