mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs: add CommandPalette full-text search section
This commit is contained in:
@@ -232,6 +232,35 @@ excludedProps:
|
||||
---
|
||||
::
|
||||
|
||||
## Full-text search
|
||||
|
||||
The CommandPalette component takes care of the full-text search for you with [Fuse.js](https://fusejs.io). You can pass all the options of Fuse.js through the `fuse` prop.
|
||||
|
||||
When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `commandAttribute` prop. This will also affect the display of the command.
|
||||
|
||||
You can also highlight the matches in the command by setting the `fuse.fuseOptions.includeMatches` to `true`. The CommandPalette component automatically takes care of the highlighting for you.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UCommandPalette
|
||||
command-attribute="title"
|
||||
:fuse="{
|
||||
fuseOptions: {
|
||||
ignoreLocation: true,
|
||||
includeMatches: true,
|
||||
threshold: 0,
|
||||
keys: ['title', 'description', 'children.children.value', 'children.children.children.value']
|
||||
},
|
||||
resultLimit: 10
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
::alert{icon="i-heroicons-light-bulb"}
|
||||
Try it yourself in this documentation's search by pressing :badge-shortcut{value="meta"} :badge-shortcut{value="K" class="ml-1"}.
|
||||
::
|
||||
|
||||
## Themes
|
||||
|
||||
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
|
||||
|
||||
Reference in New Issue
Block a user