diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md index 9db80842..241146c2 100644 --- a/docs/content/4.navigation/2.command-palette.md +++ b/docs/content/4.navigation/2.command-palette.md @@ -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 + +``` + +::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.