The DashboardSearch component extends the CommandPalette component, so you can pass any property such as icon, placeholder, etc.
Use it inside the default slot of the DashboardGroup component:
<template>
<PDashboardGroup>
<PDashboardSidebar>
<PDashboardSearchButton />
</PDashboardSidebar>
<PDashboardSearch />
<slot />
</PDashboardGroup>
</template>
v-model:open directive.Use the shortcut prop to change the shortcut used in defineShortcuts to open the ContentSearch component. Defaults to meta_k ( K).
<template>
<PDashboardSearch
v-model:search-term="searchTerm"
shortcut="meta_k"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the colorMode is not forced in a specific page which can be achieved through definePageMeta:
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
});
</script>
You can disable this behavior by setting the color-mode prop to false:
<template>
<PDashboardSearch
v-model:search-term="searchTerm"
:color-mode="false"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
commandPaletteRef | Ref<InstanceType<typeof PCommandPalette> | null> |
Below is the theme configuration skeleton for the PDashboardSearch. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
dashboardSearch: {
slots: {
dialog: '',
input: ''
},
variants: {
fullscreen: {
false: {
dialog: ''
}
}
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
dashboardSearch: {
slots: {
dialog: '',
input: ''
},
variants: {
fullscreen: {
false: {
dialog: ''
}
}
}
}
}
};