Usage
The ContentSearchButton component is used to open the ContentSearch modal.
<template>
<UContentSearchButton />
</template>
It extends the Button component, so you can pass any property such as color, variant, size, etc.
<template>
<UContentSearchButton variant="subtle" />
</template>
The button defaults to
color="neutral" and variant="outline" when not collapsed, variant="ghost" when collapsed.Collapsed
Use the collapsed prop to show the button's label and kbds. Defaults to true.
<template>
<UContentSearchButton />
</template>
Kbds
Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the ContentSearch component.
<template>
<UContentSearchButton :kbds="['alt', 'O']" />
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
app.config.ts
export default defineAppConfig({
uiPro: {
contentSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
vite.config.ts
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'
}
}
}
})
]
})
vite.config.ts
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'
}
}
}
})
]
})