docs: improve with examples

This commit is contained in:
Benjamin Canac
2023-06-16 17:16:41 +02:00
parent 1b03b8a531
commit c458f388bb
28 changed files with 719 additions and 392 deletions

View File

@@ -323,40 +323,6 @@ const groups = computed(() => {
The `loading` state will automatically be enabled when a `search` function is loading. You can disable this behavior by setting the `loading-icon` prop to `null` or globally in `ui.commandPalette.default.loadingIcon`.
::
## Themes
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
### Algolia
::component-example
---
padding: false
---
#default
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
::
::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
Take a look at the component!
::
### Raycast
::component-example
---
padding: false
---
#default
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
::
::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
Take a look at the component!
::
## Slots
### `empty-state` :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}