用法
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>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
图标 |
|
按钮中显示的图标。 |
label |
|
按钮中显示的标签。 |
color |
|
按钮的颜色。 |
variant |
按钮的变体。未折叠时默认为 'outline',折叠时为 'ghost'。 | |
尺寸 |
| |
collapsed |
|
按钮是否已折叠。 |
tooltip |
|
当按钮折叠时,在按钮上显示带有按钮标签的工具提示。这优先于全局
|
键盘按键 |
|
在按钮中显示的键盘按键。
|
ui |
|
插槽
插槽 | 类型 |
---|---|
前置 |
|
默认 |
|
尾部 |
|
主题
export default defineAppConfig({
uiPro: {
contentSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
contentSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
contentSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
]
})