mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-29 19:30:37 +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
|
## Themes
|
||||||
|
|
||||||
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
|
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