Comandancia
Una paleta de comandos con búsqueda de texto completo impulsada por Fuse.js para una coincidencia difusa eficiente.
xph0000xUso
Utilice la directiva v-model para controlar el valor de la CommandPalette o la prop default-value para establecer el valor inicial cuando no necesite controlar su estado.
Users
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref({})
</script>
<template>
<UCommandPalette v-model="value" :groups="groups" class="flex-1 h-80" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref({})
</script>
<template>
<UCommandPalette v-model="value" :groups="groups" class="flex-1 h-80" />
</template>Xph067xGrupos
El componente CommandPalette filtra los grupos y clasifica los comandos coincidentes por relevancia a medida que los usuarios escriben. Proporciona resultados de búsqueda dinámicos e instantáneos para un descubrimiento eficiente de comandos. Use el prop groups como una matriz de objetos con las siguientes propiedades:
- xx
id: stringxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - xx
label?: stringxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - xx
slot?: stringxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Debe proporcionar un
id para cada grupo de lo contrario el grupo será ignorado.Cada grupo contiene una matriz items de objetos que definen los comandos. Cada elemento puede tener las siguientes propiedades:
- x
prefix?: stringx{lang="ts-type"} - x
label?: stringx{lang="ts-type"} - x
suffix?: stringx{lang="ts-type"} - x
icon?: stringx{lang="ts-type"} - x
avatar?: AvatarPropsx{lang="ts-type"} - x
chip?: ChipPropsx{lang="ts-type"} - x
kbds?: string[] | KbdProps[]x{lang="ts-type"}xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - x
active?: booleanx{lang="ts-type"} - x
loading?: booleanx{lang="ts-type"} - x
disabled?: booleanx{lang="ts-type"} - xx
slot?: stringx{lang="ts-type"}x - x
placeholder?: stringx{lang="ts-type"} - x
children?: CommandPaletteItem[]x{lang="ts-type"} (Edición española) - x
onSelect?: (e: Event) => voidx{lang="ts-type"} - x
class?: anyx{lang="ts-type"} (Edición española) - x
ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }x{lang="ts-type"}
Puede pasar cualquier propiedad desde el componente Link como to, target, etc.
Users
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref({})
</script>
<template>
<UCommandPalette v-model="value" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref({})
</script>
<template>
<UCommandPalette v-model="value" :groups="groups" class="flex-1" />
</template>Cada elemento puede tomar una matriz
children de objetos con las siguientes propiedades para crear submenús:Multiplicación
Utilice el prop multiple para permitir múltiples selecciones.
Users
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref([])
</script>
<template>
<UCommandPalette multiple v-model="value" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref([])
</script>
<template>
<UCommandPalette multiple v-model="value" :groups="groups" class="flex-1" />
</template>Asegúrese de pasar una matriz a la prop
default-value o a la directiva v-model.Placeholder (Edición española)
Utilice el prop placeholder para cambiar el texto del marcador de posición.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette placeholder="Search an app..." :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette placeholder="Search an app..." :groups="groups" class="flex-1" />
</template>Tamaño: badge{label="4.4+" class="align-text-top"}
Utilice el prop size para cambiar el tamaño de la CommandPalette.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette size="xl" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette size="xl" :groups="groups" class="flex-1" />
</template>Icon
Utilice el prop icon para personalizar la entrada Icon.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette icon="i-lucide-box" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette icon="i-lucide-box" :groups="groups" class="flex-1" />
</template>Icono seleccionado
Utilice el prop selected-icon para personalizar el elemento seleccionado Icon.
Users
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref([
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
}
])
</script>
<template>
<UCommandPalette multiple v-model="value" selected-icon="i-lucide-circle-check" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy'
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy'
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy'
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy'
}
},
{
label: 'Alex',
suffix: 'hywax',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy'
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy'
}
}
]
}
])
const value = ref([
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
}
}
])
</script>
<template>
<UCommandPalette multiple v-model="value" selected-icon="i-lucide-circle-check" :groups="groups" class="flex-1" />
</template>XPH467XTrailing Icon de seguridad
Utilice el prop trailing-icon para personalizar el elemento final Icon cuando un elemento tiene hijos.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette trailing-icon="i-lucide-arrow-right" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette trailing-icon="i-lucide-arrow-right" :groups="groups" class="flex-1" />
</template>Carga
Utilice el accesorio loading para mostrar un icono de carga en la paleta de comandos.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette loading :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette loading :groups="groups" class="flex-1" />
</template>Loading Icon (en inglés)
Utilice el prop loading-icon para personalizar el icono de carga.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette loading loading-icon="i-lucide-loader" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette loading loading-icon="i-lucide-loader" :groups="groups" class="flex-1" />
</template>Cerrar
Utilice el prop close para mostrar un Button para descartar el CommandPalette.
Se emitirá un evento
update:open cuando se haga clic en el botón Cerrar.<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette close :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette close :groups="groups" class="flex-1" />
</template>Puede pasar cualquier propiedad del componente Button para personalizarlo.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette
:close="{
color: 'primary',
variant: 'outline',
class: 'rounded-full'
}"
:groups="groups"
class="flex-1"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette
:close="{
color: 'primary',
variant: 'outline',
class: 'rounded-full'
}"
:groups="groups"
class="flex-1"
/>
</template>Cerrar Icono
Utilice el prop close-icon para personalizar el botón de cierre Icon.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette close close-icon="i-lucide-arrow-right" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette close close-icon="i-lucide-arrow-right" :groups="groups" class="flex-1" />
</template>Atrás
Utilice el accesorio back para personalizar u ocultar el botón Atrás (con el valor false) que se muestra al navegar por un submenú.
Puede pasar cualquier propiedad del componente Button para personalizarlo.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette
:back="{
color: 'primary'
}"
:groups="groups"
class="flex-1"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette
:back="{
color: 'primary'
}"
:groups="groups"
class="flex-1"
/>
</template>Back Icono de
Utilice el accesorio back-icon para personalizar el botón de retroceso Icon.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette back-icon="i-lucide-house" :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'actions',
items: [
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Email',
icon: 'i-lucide-mail'
},
{
label: 'Copy',
icon: 'i-lucide-copy'
},
{
label: 'Link',
icon: 'i-lucide-link'
}
]
}
]
}
])
</script>
<template>
<UCommandPalette back-icon="i-lucide-house" :groups="groups" class="flex-1" />
</template>Desactivado
Utilice el prop disabled para desactivar el CommandPalette.
<script setup lang="ts">
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette disabled :groups="groups" class="flex-1" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteGroup } from '@nuxt/ui'
const groups = ref<CommandPaletteGroup[]>([
{
id: 'apps',
items: [
{
label: 'Calendar',
icon: 'i-lucide-calendar'
},
{
label: 'Music',
icon: 'i-lucide-music'
},
{
label: 'Maps',
icon: 'i-lucide-map'
}
]
}
])
</script>
<template>
<UCommandPalette disabled :groups="groups" class="flex-1" />
</template>Ejemplos
Control artículo (s) seleccionado (s)
Puede controlar los elementos seleccionados mediante la prop default-value o la directiva v-model, mediante el campo onSelect en cada elemento o mediante el evento @update:model-value.
<script setup lang="ts">
const toast = useToast()
const groups = ref([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
},
{
id: 'actions',
items: [
{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-lucide-file-plus',
kbds: [
'meta',
'N'
],
onSelect() {
toast.add({ title: 'Add new file' })
}
},
{
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-lucide-folder-plus',
kbds: [
'meta',
'F'
],
onSelect() {
toast.add({ title: 'Add new folder' })
}
},
{
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-lucide-hash',
kbds: [
'meta',
'H'
],
onSelect() {
toast.add({ title: 'Add hashtag' })
}
},
{
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-lucide-tag',
kbds: [
'meta',
'L'
],
onSelect() {
toast.add({ title: 'Add label' })
}
}
]
}
])
function onSelect(item: any) {
console.log(item)
}
</script>
<template>
<UCommandPalette
:groups="groups"
class="flex-1 h-80"
@update:model-value="onSelect"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const toast = useToast()
const groups = ref([
{
id: 'users',
label: 'Users',
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
},
{
id: 'actions',
items: [
{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-lucide-file-plus',
kbds: [
'meta',
'N'
],
onSelect() {
toast.add({ title: 'Add new file' })
}
},
{
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-lucide-folder-plus',
kbds: [
'meta',
'F'
],
onSelect() {
toast.add({ title: 'Add new folder' })
}
},
{
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-lucide-hash',
kbds: [
'meta',
'H'
],
onSelect() {
toast.add({ title: 'Add hashtag' })
}
},
{
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-lucide-tag',
kbds: [
'meta',
'L'
],
onSelect() {
toast.add({ title: 'Add label' })
}
}
]
}
])
function onSelect(item: any) {
console.log(item)
}
</script>
<template>
<UCommandPalette
:groups="groups"
class="flex-1 h-80"
@update:model-value="onSelect"
/>
</template>
Utilice la prop
value-key para seleccionar un campo de un elemento que se utilizará como valor en lugar del objeto en sí. Use la prop by para comparar objetos por un campo en lugar de por referencia.Control términos de búsqueda
Utiliza la directiva v-model:search-term para controlar el término de búsqueda.
<script setup lang="ts">
const users = [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
const searchTerm = ref('B')
function onSelect() {
searchTerm.value = ''
}
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const users = [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
const searchTerm = ref('B')
function onSelect() {
searchTerm.value = ''
}
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>
Este ejemplo utiliza el evento
@update:model-value para restablecer el término de búsqueda cuando se selecciona un elemento.Con niños en artículos
Puede crear menús jerárquicos mediante la propiedad children en items. Cuando un elemento tiene hijos, mostrará automáticamente un icono de chevron y habilitará la navegación en un submenú.
Actions
<script setup lang="ts">
const toast = useToast()
const groups = [
{
id: 'actions',
label: 'Actions',
items: [
{
label: 'Create new',
icon: 'i-lucide-plus',
children: [
{
label: 'New file',
icon: 'i-lucide-file-plus',
suffix: 'Create a new file in the current directory',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'New file created!' })
},
kbds: ['meta', 'N']
},
{
label: 'New folder',
icon: 'i-lucide-folder-plus',
suffix: 'Create a new folder in the current directory',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'New folder created!' })
},
kbds: ['meta', 'F']
},
{
label: 'New project',
icon: 'i-lucide-folder-git',
suffix: 'Create a new project from a template',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'New project created!' })
},
kbds: ['meta', 'P']
}
]
},
{
label: 'Share',
icon: 'i-lucide-share',
children: [
{
label: 'Copy link',
icon: 'i-lucide-link',
suffix: 'Copy a link to the current item',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Link copied to clipboard!' })
},
kbds: ['meta', 'L']
},
{
label: 'Share via email',
icon: 'i-lucide-mail',
suffix: 'Share the current item via email',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Share via email dialog opened!' })
}
},
{
label: 'Share on social',
icon: 'i-lucide-share-2',
suffix: 'Share the current item on social media',
children: [
{
label: 'Twitter',
icon: 'i-simple-icons-twitter',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Shared on Twitter!' })
}
},
{
label: 'LinkedIn',
icon: 'i-simple-icons-linkedin',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Shared on LinkedIn!' })
}
},
{
label: 'Facebook',
icon: 'i-simple-icons-facebook',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Shared on Facebook!' })
}
}
]
}
]
},
{
label: 'Settings',
icon: 'i-lucide-settings',
children: [
{
label: 'General',
icon: 'i-lucide-sliders',
suffix: 'Configure general settings',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'General settings opened!' })
}
},
{
label: 'Appearance',
icon: 'i-lucide-palette',
suffix: 'Customize the appearance',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Appearance settings opened!' })
}
},
{
label: 'Security',
icon: 'i-lucide-shield',
suffix: 'Manage security settings',
onSelect(e: Event) {
e.preventDefault()
toast.add({ title: 'Security settings opened!' })
}
}
]
}
]
}
]
</script>
<template>
<UCommandPalette :groups="groups" class="flex-1" />
</template>Al navegar en un submenú:
- El término de búsqueda se restablece
- A botón de retroceso aparece en la entrada
- Puede volver al grupo anterior pulsando la tecla: kbd{value="backspace"}
Con elementos recuperados
Puede obtener elementos de una API y usarlos en el CommandPalette.
No data
<script setup lang="ts">
const searchTerm = ref('')
const { data: users, status } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users',
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
server: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || []
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending' || status === 'idle'"
:groups="groups"
class="flex-1 h-80"
/>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const searchTerm = ref('')
const { data: users, status } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users',
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
server: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || []
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending' || status === 'idle'"
:groups="groups"
class="flex-1 h-80"
/>
</template>
Este ejemplo utiliza
useLazyFetch con server: false para obtener datos en el cliente sin bloquear el renderizado inicial. El estado de carga comprueba el estado de pending y idle para mostrar un indicador de carga antes y durante la extracción.Con el filtro ignorar
Puede establecer el campo ignoreFilter en true en un grupo para desactivar la búsqueda interna y usar su propia lógica de búsqueda.
No data
<script setup lang="ts">
import { refDebounced } from '@vueuse/core'
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
const { data: users, status } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users-search',
params: { q: searchTermDebounced },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
server: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending' || status === 'idle'"
:groups="groups"
class="flex-1 h-80"
/>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { refDebounced } from '@vueuse/core'
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
const { data: users, status } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users-search',
params: { q: searchTermDebounced },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
server: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending' || status === 'idle'"
:groups="groups"
class="flex-1 h-80"
/>
</template>
Este ejemplo utiliza
refDebounced para desacreditar las llamadas de la API. El estado de carga comprueba el estado de pending y idle para mostrar un indicador de carga antes y durante la búsqueda.Con elementos post-filtrados
Puede utilizar el campo postFilter en un grupo para filtrar elementos después de que se haya realizado la búsqueda.
<script setup lang="ts">
const items = [
{
id: '/',
label: 'Introduction',
level: 1
},
{
id: '/docs/getting-started#whats-new-in-v3',
label: 'What\'s new in v3?',
level: 2
},
{
id: '/docs/getting-started#reka-ui',
label: 'Reka UI',
level: 3
},
{
id: '/docs/getting-started#tailwind-css',
label: 'Tailwind CSS',
level: 3
},
{
id: '/docs/getting-started#tailwind-variants',
label: 'Tailwind Variants',
level: 3
},
{
id: '/docs/getting-started/installation',
label: 'Installation',
level: 1
}
]
function postFilter(searchTerm: string, items: any[]) {
// Filter only first level items if no searchTerm
if (!searchTerm) {
return items?.filter(item => item.level === 1)
}
return items
}
</script>
<template>
<UCommandPalette :groups="[{ id: 'files', items, postFilter }]" class="flex-1" />
</template>
Comience a escribir para ver los elementos con mayor nivel aparecen.
With búsqueda personalizada de fusibles
Puede utilizar el prop fuse para anular las opciones de useFuse que por defecto es:
{
fuseOptions: {
ignoreLocation: true,
threshold: 0.1,
keys: ['label', 'description', 'suffix']
},
resultLimit: 12,
matchAllWhenSearchEmpty: true
}
El
fuseOptions son las opciones de Fuse.js, el resultLimit es el número máximo de resultados a devolver y el matchAllWhenSearchEmpty es un booleano para que coincida con todos los elementos cuando el término de búsqueda está vacío.Por ejemplo, puede configurar { fuseOptions: { includeMatches: true } } para resaltar el término de búsqueda en los elementos.
No data
<script setup lang="ts">
const { data: users } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users',
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
server: false
})
</script>
<template>
<UCommandPalette
:groups="[{ id: 'users', items: users || [] }]"
:fuse="{ fuseOptions: { includeMatches: true } }"
class="flex-1 h-80"
/>
</template>
Con virtualización: badge{label="4.1+" class="align-text-top"}
Utilice el prop virtualize para habilitar la virtualización de listas grandes como un booleano o un objeto con opciones como { estimateSize: 32, overscan: 12 }.
Cuando está habilitado, todos los grupos se aplanan en una sola lista debido a una limitación de Reka UI.
<script setup lang="ts">
import type { CommandPaletteItem } from '@nuxt/ui'
const items: CommandPaletteItem[] = Array(1000)
.fill(0)
.map((_, value) => ({
label: `item-${value}`,
value
}))
const groups = [
{
id: 'items',
items
}
]
</script>
<template>
<UCommandPalette
virtualize
:fuse="{ resultLimit: 1000 }"
:groups="groups"
class="flex-1 h-80"
/>
</template>
Dentro de un Popover
Puede utilizar el componente CommandPalette dentro del contenido de un Popover.
<script setup lang="ts">
import type { CommandPaletteItem } from '@nuxt/ui'
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error'
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success'
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info'
}
}
] satisfies CommandPaletteItem[])
const label = ref([])
</script>
<template>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton
icon="i-lucide-tag"
label="Select labels"
color="neutral"
variant="subtle"
/>
<template #content>
<UCommandPalette
v-model="label"
multiple
placeholder="Search labels..."
:groups="[{ id: 'labels', items }]"
:ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
/>
</template>
</UPopover>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CommandPaletteItem } from '@nuxt/ui'
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error'
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success'
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info'
}
}
] satisfies CommandPaletteItem[])
const label = ref([])
</script>
<template>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton
icon="i-lucide-tag"
label="Select labels"
color="neutral"
variant="subtle"
/>
<template #content>
<UCommandPalette
v-model="label"
multiple
placeholder="Search labels..."
:groups="[{ id: 'labels', items }]"
:ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
/>
</template>
</UPopover>
</template>
Dentro de un modal
Puede utilizar el componente CommandPalette dentro del contenido de un Modal.
<script setup lang="ts">
const searchTerm = ref('')
const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'modal-command-palette-users',
params: { q: searchTerm },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
immediate: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
function onOpen() {
if (!users.value?.length) {
execute()
}
}
</script>
<template>
<UModal @update:open="onOpen">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-80"
/>
</template>
</UModal>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const searchTerm = ref('')
const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'modal-command-palette-users',
params: { q: searchTerm },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
immediate: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
function onOpen() {
if (!users.value?.length) {
execute()
}
}
</script>
<template>
<UModal @update:open="onOpen">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-80"
/>
</template>
</UModal>
</template>
Este ejemplo usa
useLazyFetch con immediate: false para obtener datos solo cuando se abre el Modal.Dentro de un cajón
Puede usar el componente CommandPalette dentro del contenido de un Drawer.
<script setup lang="ts">
const searchTerm = ref('')
const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'drawer-command-palette-users',
params: { q: searchTerm },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
immediate: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
function onOpen() {
if (!users.value?.length) {
execute()
}
}
</script>
<template>
<UDrawer :handle="false" @update:open="onOpen">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-80"
/>
</template>
</UDrawer>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const searchTerm = ref('')
const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
key: 'drawer-command-palette-users',
params: { q: searchTerm },
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
},
immediate: false
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
ignoreFilter: true
}])
function onOpen() {
if (!users.value?.length) {
execute()
}
}
</script>
<template>
<UDrawer :handle="false" @update:open="onOpen">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-80"
/>
</template>
</UDrawer>
</template>
Este ejemplo utiliza
useLazyFetch con immediate: false para obtener datos solo cuando se abre el cajón.Listen en estado abierto
Cuando se utiliza el accesorio close, puede escuchar el evento update:open cuando se hace clic en el botón.
<script setup lang="ts">
const open = ref(false)
const users = [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
</script>
<template>
<UModal v-model:open="open">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette close :groups="[{ id: 'users', items: users }]" @update:open="open = $event" />
</template>
</UModal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
const users = [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy' as const
}
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank',
avatar: {
src: 'https://github.com/HugoRCD.png',
loading: 'lazy' as const
}
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy' as const
}
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
loading: 'lazy' as const
}
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank',
avatar: {
src: 'https://github.com/sandros94.png',
loading: 'lazy' as const
}
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank',
avatar: {
src: 'https://github.com/J-Michalek.png',
loading: 'lazy' as const
}
},
{
label: 'Alex',
suffix: 'hywax',
to: 'https://github.com/hywax',
target: '_blank',
avatar: {
src: 'https://github.com/hywax.png',
loading: 'lazy' as const
}
},
{
label: 'Maxime Pauvert',
suffix: 'maximepvrt',
to: 'https://github.com/maximepvrt',
target: '_blank',
avatar: {
src: 'https://github.com/maximepvrt.png',
loading: 'lazy' as const
}
}
]
</script>
<template>
<UModal v-model:open="open">
<UButton
label="Search users..."
color="neutral"
variant="subtle"
icon="i-lucide-search"
/>
<template #content>
<UCommandPalette close :groups="[{ id: 'users', items: users }]" @update:open="open = $event" />
</template>
</UModal>
</template>
Esto puede ser útil cuando se utiliza el CommandPalette dentro de un
Modal por ejemplo.Con ranura de pie de página
Utilice la ranura #footer para agregar contenido personalizado en la parte inferior de la paleta de comandos, como la ayuda de atajos de teclado o acciones adicionales.
Recent
<script setup lang="ts">
const groups = [
{
id: 'actions',
items: [
{
label: 'Add new file',
suffix: 'Create a new file in the current directory',
icon: 'i-lucide-file-plus',
kbds: ['meta', 'N']
},
{
label: 'Add new folder',
suffix: 'Create a new folder in the current directory',
icon: 'i-lucide-folder-plus',
kbds: ['meta', 'F']
},
{
label: 'Search files',
suffix: 'Search across all files in the project',
icon: 'i-lucide-search',
kbds: ['meta', 'P']
},
{
label: 'Settings',
suffix: 'Open application settings',
icon: 'i-lucide-settings',
kbds: ['meta', ',']
}
]
},
{
id: 'recent',
label: 'Recent',
items: [
{
label: 'project.vue',
suffix: 'components/',
icon: 'i-vscode-icons-file-type-vue'
},
{
label: 'readme.md',
suffix: 'docs/',
icon: 'i-vscode-icons-file-type-markdown'
},
{
label: 'package.json',
suffix: 'root/',
icon: 'i-vscode-icons-file-type-node'
}
]
}
]
</script>
<template>
<UCommandPalette :groups="groups" class="flex-1 h-80">
<template #footer>
<div class="flex items-center justify-between gap-2">
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
<div class="flex items-center gap-1">
<UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
<template #trailing>
<UKbd value="enter" />
</template>
</UButton>
<USeparator orientation="vertical" class="h-4" />
<UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
<template #trailing>
<UKbd value="meta" />
<UKbd value="k" />
</template>
</UButton>
</div>
</div>
</template>
</UCommandPalette>
</template>
Con slot personalizado
Utilice la propiedad slot para personalizar un elemento o grupo específico.
Tendrás acceso a las siguientes slots:
- x
#{{ item.slot }}xx{lang="ts-type"} (Edición española) - x
#{{ item.slot }}-leadingxx{lang="ts-type"} (Edición española) - x
#{{ item.slot }}-labelxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - x
#{{ item.slot }}-trailingx{lang="ts-type"} (Edición española) - x
#{{ group.slot }}xxx{lang="ts-type"} - xx
#{{ group.slot }}-leadingxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - x
#{{ group.slot }}-labelxx{lang="ts-type"} (Edición española) - x
#{{ group.slot }}-trailingxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<script setup lang="ts">
const groups = [
{
id: 'settings',
items: [
{
label: 'Profile',
icon: 'i-lucide-user',
kbds: ['meta', 'P']
},
{
label: 'Billing',
icon: 'i-lucide-credit-card',
kbds: ['meta', 'B'],
slot: 'billing' as const
},
{
label: 'Notifications',
icon: 'i-lucide-bell'
},
{
label: 'Security',
icon: 'i-lucide-lock'
}
]
},
{
id: 'users',
label: 'Users',
slot: 'users' as const,
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank'
},
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank'
},
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank'
},
{
label: 'Hugo Richard',
suffix: 'HugoRCD',
to: 'https://github.com/HugoRCD',
target: '_blank'
},
{
label: 'Sandro Circi',
suffix: 'sandros94',
to: 'https://github.com/sandros94',
target: '_blank'
},
{
label: 'Daniel Roe',
suffix: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank'
},
{
label: 'Jakub Michálek',
suffix: 'J-Michalek',
to: 'https://github.com/J-Michalek',
target: '_blank'
},
{
label: 'Eugen Istoc',
suffix: 'genu',
to: 'https://github.com/genu',
target: '_blank'
}
]
}
]
</script>
<template>
<UCommandPalette :groups="groups" class="flex-1 h-80">
<template #users-leading="{ item }">
<UAvatar :src="`https://github.com/${item.suffix}.png`" size="2xs" loading="lazy" />
</template>
<template #billing-label="{ item }">
<span class="font-medium text-primary">{{ item.label }}</span>
<UBadge variant="subtle" size="sm">
50% off
</UBadge>
</template>
</UCommandPalette>
</template>
También puede usar las ranuras
#item, #item-leading, #item-label y #item-trailing para personalizar todos los artículos.API (Versión)
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
size | 'md' | "sm" | "md" | "xs" | "lg" | "xl" |
icon | appConfig.ui.icons.search | anyThe icon displayed in the input. Set to |
trailingIcon | appConfig.ui.icons.search | anyThe icon displayed on the right side of the input. |
selectedIcon | appConfig.ui.icons.check | anyThe icon displayed when an item is selected. |
childrenIcon | appConfig.ui.icons.chevronRight | anyThe icon displayed when an item has children. |
placeholder | t('commandPalette.placeholder') | stringThe placeholder text for the input. |
autofocus | true | boolean Automatically focus the input when component is mounted. |
close | false | boolean | Omit<ButtonProps, LinkPropsKeys> Display a close button in the input (useful when inside a Modal for example).
|
closeIcon | appConfig.ui.icons.close | anyThe icon displayed in the close button. |
back | true | boolean | Omit<ButtonProps, LinkPropsKeys> Display a button to navigate back in history.
|
backIcon | appConfig.ui.icons.arrowLeft | anyThe icon displayed in the back button. |
input | true | boolean | Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" | "defaultValue"> Configure the input or hide it with |
groups | G[] | |
fuse | { fuseOptions: { ignoreLocation: true, threshold: 0.1, keys: ['label', 'description', 'suffix'] }, resultLimit: 12, matchAllWhenSearchEmpty: true } | UseFuseOptions<T>Options for useFuse. |
virtualize | false | boolean | { overscan?: number ; estimateSize?: number | ((index: number) => number) | undefined; } | undefinedEnable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885). |
valueKey | undefined | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>When |
labelKey | 'label' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>The key used to get the label from the item. |
descriptionKey | 'description' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>The key used to get the description from the item. |
preserveGroupOrder | false | boolean Whether to preserve the order of groups as defined in the |
searchDelay | 0 | numberDelay (in milliseconds) before the search term is passed to Fuse (debounced).
Useful when indexing large datasets where fuzzy search becomes the bottleneck — the input stays responsive while Fuse and the result pipeline only re-run after typing settles.
Set to |
multiple | boolean Whether multiple options can be selected or not. | |
disabled | boolean When | |
modelValue | null | string | number | bigint | Record<string, any> | AcceptableValue[]The controlled value of the listbox. Can be binded with | |
defaultValue | null | string | number | bigint | Record<string, any> | AcceptableValue[]The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox | |
highlightOnHover | true | boolean When |
selectionBehavior | 'toggle' | "replace" | "toggle"How multiple selection should behave in the collection. |
by | string | (a: AcceptableValue, b: AcceptableValue): booleanUse this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. | |
loading | boolean When | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
searchTerm | '' | string |
ui | { root?: SlotClass; input?: SlotClass; close?: SlotClass; back?: SlotClass; content?: SlotClass; footer?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemTrailingHighlightedIcon?: SlotClass; itemTrailingKbds?: SlotClass; itemTrailingKbdsSize?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemLabelBase?: SlotClass; itemLabelPrefix?: SlotClass; itemLabelSuffix?: SlotClass; itemDescription?: SlotClass; } |
Slots (Edición española)
| Slot | Type |
|---|---|
empty | { searchTerm: string; } |
footer | { ui: object; } |
back | { ui: object; } |
close | { ui: object; } |
item | { item: T; index: number; ui: object; } |
item-leading | { item: T; index: number; ui: object; } |
item-label | { item: T; index: number; ui: object; } |
item-description | { item: T; index: number; ui: object; } |
item-trailing | { item: T; index: number; ui: object; } |
group-label | { group: G; label: string; ui: object; } |
Emisiones
| Event | Type |
|---|---|
update:modelValue | [value: T] |
highlight | [payload: { ref: HTMLElement; value: T; } | undefined] |
entryFocus | [event: CustomEvent<any>] |
leave | [event: Event] |
update:open | [value: boolean] |
update:searchTerm | [value: string] |
Theme
app.config.ts
export default defineAppConfig({
ui: {
commandPalette: {
slots: {
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
input: '',
close: '',
back: 'p-0',
content: 'relative overflow-hidden flex flex-col',
footer: 'p-1',
viewport: 'relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
group: 'p-1 isolate',
empty: 'text-center text-muted',
label: 'font-semibold text-highlighted',
item: 'group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',
itemLeadingChipSize: '',
itemTrailing: 'ms-auto inline-flex items-center',
itemTrailingIcon: 'shrink-0',
itemTrailingHighlightedIcon: 'shrink-0 text-dimmed hidden group-data-highlighted:inline-flex',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
itemTrailingKbdsSize: '',
itemWrapper: 'flex-1 flex flex-col text-start min-w-0',
itemLabel: 'truncate space-x-1 text-dimmed',
itemLabelBase: 'text-highlighted [&>mark]:text-primary [&>mark]:bg-primary/15',
itemLabelPrefix: 'text-default',
itemLabelSuffix: 'text-dimmed [&>mark]:text-primary [&>mark]:bg-primary/15',
itemDescription: 'truncate text-muted [&>mark]:text-primary [&>mark]:bg-primary/15'
},
variants: {
virtualize: {
true: {
viewport: 'p-1 isolate'
},
false: {
viewport: 'divide-y divide-default'
}
},
size: {
xs: {
input: '[&>input]:h-10',
empty: 'py-3 text-xs',
label: 'p-1 text-[10px]/3 gap-1',
item: 'p-1 text-xs gap-1',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailing: 'gap-1',
itemTrailingIcon: 'size-4',
itemTrailingHighlightedIcon: 'size-4',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'sm'
},
sm: {
input: '[&>input]:h-11',
empty: 'py-4 text-xs',
label: 'p-1.5 text-[10px]/3 gap-1.5',
item: 'p-1.5 text-xs gap-1.5',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailing: 'gap-1.5',
itemTrailingIcon: 'size-4',
itemTrailingHighlightedIcon: 'size-4',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'sm'
},
md: {
input: '[&>input]:h-12',
empty: 'py-6 text-sm',
label: 'p-1.5 text-xs gap-1.5',
item: 'p-1.5 text-sm gap-1.5',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'gap-1.5',
itemTrailingIcon: 'size-5',
itemTrailingHighlightedIcon: 'size-5',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'md'
},
lg: {
input: '[&>input]:h-13',
empty: 'py-7 text-sm',
label: 'p-2 text-xs gap-2',
item: 'p-2 text-sm gap-2',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'gap-2',
itemTrailingIcon: 'size-5',
itemTrailingHighlightedIcon: 'size-5',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'md'
},
xl: {
input: '[&>input]:h-14',
empty: 'py-8 text-base',
label: 'p-2 text-sm gap-2',
item: 'p-2 text-base gap-2',
itemLeadingIcon: 'size-6',
itemLeadingAvatarSize: 'xs',
itemLeadingChip: 'size-6',
itemLeadingChipSize: 'lg',
itemTrailing: 'gap-2',
itemTrailingIcon: 'size-6',
itemTrailingHighlightedIcon: 'size-6',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'lg'
}
},
active: {
true: {
item: 'text-highlighted before:bg-elevated',
itemLeadingIcon: 'text-default'
},
false: {
item: [
'text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50',
'transition-colors before:transition-colors'
],
itemLeadingIcon: [
'text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
'transition-colors'
]
}
},
loading: {
true: {
itemLeadingIcon: 'animate-spin'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
commandPalette: {
slots: {
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
input: '',
close: '',
back: 'p-0',
content: 'relative overflow-hidden flex flex-col',
footer: 'p-1',
viewport: 'relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
group: 'p-1 isolate',
empty: 'text-center text-muted',
label: 'font-semibold text-highlighted',
item: 'group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',
itemLeadingChipSize: '',
itemTrailing: 'ms-auto inline-flex items-center',
itemTrailingIcon: 'shrink-0',
itemTrailingHighlightedIcon: 'shrink-0 text-dimmed hidden group-data-highlighted:inline-flex',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
itemTrailingKbdsSize: '',
itemWrapper: 'flex-1 flex flex-col text-start min-w-0',
itemLabel: 'truncate space-x-1 text-dimmed',
itemLabelBase: 'text-highlighted [&>mark]:text-primary [&>mark]:bg-primary/15',
itemLabelPrefix: 'text-default',
itemLabelSuffix: 'text-dimmed [&>mark]:text-primary [&>mark]:bg-primary/15',
itemDescription: 'truncate text-muted [&>mark]:text-primary [&>mark]:bg-primary/15'
},
variants: {
virtualize: {
true: {
viewport: 'p-1 isolate'
},
false: {
viewport: 'divide-y divide-default'
}
},
size: {
xs: {
input: '[&>input]:h-10',
empty: 'py-3 text-xs',
label: 'p-1 text-[10px]/3 gap-1',
item: 'p-1 text-xs gap-1',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailing: 'gap-1',
itemTrailingIcon: 'size-4',
itemTrailingHighlightedIcon: 'size-4',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'sm'
},
sm: {
input: '[&>input]:h-11',
empty: 'py-4 text-xs',
label: 'p-1.5 text-[10px]/3 gap-1.5',
item: 'p-1.5 text-xs gap-1.5',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemLeadingChip: 'size-4',
itemLeadingChipSize: 'sm',
itemTrailing: 'gap-1.5',
itemTrailingIcon: 'size-4',
itemTrailingHighlightedIcon: 'size-4',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'sm'
},
md: {
input: '[&>input]:h-12',
empty: 'py-6 text-sm',
label: 'p-1.5 text-xs gap-1.5',
item: 'p-1.5 text-sm gap-1.5',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'gap-1.5',
itemTrailingIcon: 'size-5',
itemTrailingHighlightedIcon: 'size-5',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'md'
},
lg: {
input: '[&>input]:h-13',
empty: 'py-7 text-sm',
label: 'p-2 text-xs gap-2',
item: 'p-2 text-sm gap-2',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'gap-2',
itemTrailingIcon: 'size-5',
itemTrailingHighlightedIcon: 'size-5',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'md'
},
xl: {
input: '[&>input]:h-14',
empty: 'py-8 text-base',
label: 'p-2 text-sm gap-2',
item: 'p-2 text-base gap-2',
itemLeadingIcon: 'size-6',
itemLeadingAvatarSize: 'xs',
itemLeadingChip: 'size-6',
itemLeadingChipSize: 'lg',
itemTrailing: 'gap-2',
itemTrailingIcon: 'size-6',
itemTrailingHighlightedIcon: 'size-6',
itemTrailingKbds: 'gap-0.5',
itemTrailingKbdsSize: 'lg'
}
},
active: {
true: {
item: 'text-highlighted before:bg-elevated',
itemLeadingIcon: 'text-default'
},
false: {
item: [
'text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50',
'transition-colors before:transition-colors'
],
itemLeadingIcon: [
'text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
'transition-colors'
]
}
},
loading: {
true: {
itemLeadingIcon: 'animate-spin'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})Changelog (Edición española)
No recent changes