Bearbeiten
Verwenden Sie die v-model-Direktive, um den Wert der CommandPalette zu steuern, oder die default-value-Prop, um den Anfangswert festzulegen, wenn Sie den Zustand nicht steuern müssen.
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>Groups (englisch)
Die CommandPalette-Komponente filtert Gruppen und ordnet übereinstimmende Befehle nach Relevanz, wenn Benutzer sie eingeben. Sie bietet dynamische, sofortige Suchergebnisse für eine effiziente Befehlsermittlung. Verwenden Sie die groups-Prop als Array von Objekten mit den folgenden Eigenschaften:
id: string(nicht vorhanden)label?: string(nicht vorhanden)slot?: stringx077xx07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x007x07x07x007x07x007x07x007x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000items?: CommandPaletteItem[](nicht vorhanden)ignoreFilter?: booleanpostFilter?: (searchTerm: string, items: T[]) => T[]highlightedIcon?: string(nicht vorhanden)
Sie müssen für jede Gruppe ein
id angeben, da die Gruppe sonst ignoriert wird.Jede Gruppe enthält ein items-Array von Objekten, die die Befehle definieren. Jedes Element kann die folgenden Eigenschaften haben:
prefix?: string(nicht)label?: string| mehrsuffix?: string(nicht)icon?: stringavatar?: AvatarProps(nicht)chip?: ChipProps(nicht)kbds?: string[] | KbdProps[](nicht)active?: boolean(nicht)loading?: boolean(nicht)disabled?: boolean(nicht)- [
slot?: string](](#with-custom-slot) placeholder?: string(nicht)children?: CommandPaletteItem[](englisch)onSelect?: (e: Event) => void| mehrclass?: any(nicht)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 }(englisch)
Sie können jede Eigenschaft der Komponente Link übergeben, z. B. to, target usw.
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>Jedes Element kann ein
children-Array von Objekten mit den folgenden Eigenschaften zum Erstellen von Untermenüs verwenden:multiple (Mehrfach)
Verwenden Sie die multiple-Prop, um mehrere Auswahlen zu ermöglichen.
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>Stellen Sie sicher, dass Sie ein Array an die
default-value-prop-oder die v-model-Direktive übergeben.Platzhalter
Verwenden Sie die placeholder-Prop, um den Platzhaltertext zu ändern.
<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>Größe: badge{label="4.4+" class="align-text-top"}
Verwenden Sie die size-prop, um die Größe der CommandPalette zu ändern.
<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 (englisch)
Verwenden Sie die icon-Prop, um die Eingabe Icon anzupassen.
<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>Sie können dieses Symbol global in Ihrem
vite.config.ts unter dem ui.icons.search-Schlüssel anpassen.Selected Icon auswählen
Verwenden Sie die selected-icon-Prop, um das ausgewählte Element anzupassen Icon. Standardmäßig i-lucide-check.
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>Trailing Icon (Deutsche Übersetzung)
Verwenden Sie die trailing-icon-Prop, um die nachlaufende Icon anzupassen, wenn ein Element untergeordnete Elemente hat.
<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>Sie können dieses Symbol global in Ihrem
app.config.ts unter dem ui.icons.chevronRight-Schlüssel anpassen.Sie können dieses Symbol global in Ihrem
vite.config.ts unter dem ui.icons.chevronRight-Schlüssel anpassen.Loading (nicht verfügbar)
Verwenden Sie die loading prop, um ein Ladesymbol auf der CommandPalette anzuzeigen.
<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 (englisch)
Verwenden Sie die loading-icon-Prop, um das Ladesymbol anzupassen. Standardmäßig ist i-lucide-loader-circle.
<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>Sie können dieses Symbol global in Ihrem
app.config.ts unter dem ui.icons.loading-Schlüssel anpassen.Close Bearbeiten
Verwenden Sie die close-Prop, um eine Button anzuzeigen, um die CommandPalette zu beenden.
Ein
update:open-Ereignis wird ausgegeben, wenn die Schaltfläche Schließen geklickt wird.<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>Sie können jede Eigenschaft der Komponente Button übergeben, um sie anzupassen.
<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>Close Icon (nicht vorhanden)
Verwenden Sie die close-icon-Prop, um die Schließen-Taste Icon. Defaults auf i-lucide-x.
<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>Sie können dieses Symbol global in Ihrem
vite.config.ts unter dem ui.icons.close-Schlüssel anpassen.Back (englisch)
Verwenden Sie die back-Prop, um die Zurück-Schaltfläche (mit dem false-Wert) anzupassen oder auszublenden, die beim Navigieren in ein Untermenü angezeigt wird.
Sie können jede Eigenschaft der Komponente Button übergeben, um sie anzupassen.
<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 Icon (englisch)
Verwenden Sie die back-icon-Prop, um die Zurück-Taste Icon. Defaults auf i-lucide-arrow-left.
<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>Sie können dieses Symbol global in Ihrem
app.config.ts unter dem ui.icons.arrowLeft-Schlüssel anpassen.Sie können dieses Symbol global in Ihrem
vite.config.ts unter dem ui.icons.arrowLeft-Schlüssel anpassen.Disabled (englisch)
Verwenden Sie die disabled-prop, um die CommandPalette zu deaktivieren.
<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>Examples Bearbeiten
Control selected item (s) Ausgewähltes Element
Sie können die ausgewählten Elemente steuern, indem Sie die default-value-prop-oder die v-model-Direktive verwenden, indem Sie das onSelect-Feld für jedes Element verwenden oder das @update:model-value-Ereignis verwenden.
<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>
Verwenden Sie die
value-key-prop, um ein Feld eines Elements auszuwählen, das anstelle des Objekts selbst als Wert verwendet werden soll.Control Suchbegriff
Verwenden Sie die v-model:search-term-Direktive, um den Suchbegriff zu steuern.
<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>
In diesem Beispiel wird das Ereignis
@update:model-value verwendet, um den Suchbegriff zurückzusetzen, wenn ein Element ausgewählt wird.With children in items (Mit Kindern in Gegenständen)
Sie können hierarchische Menüs erstellen, indem Sie die children-Eigenschaft in items verwenden. Wenn ein Element untergeordnete Elemente hat, wird automatisch ein Chevron-Symbol angezeigt und die Navigation in ein Untermenü aktiviert.
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>Navigieren Sie in ein Untermenü:
- Der Suchbegriff wird zurückgesetzt
- A Zurück-Taste erscheint im Eingang
- Sie können zur vorherigen Gruppe zurückkehren, indem Sie die Taste: kbd{value="backspace"} drücken
Mit hergeholten Objekten
Sie können Elemente von einer API abrufen und in der CommandPalette verwenden.
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>
In diesem Beispiel wird
useLazyFetch mit server: false verwendet, um Daten auf dem Client abzurufen, ohne das anfängliche Rendern zu blockieren. Der Ladezustand überprüft sowohl den pending-als auch den idle-Status, um vor und während des Abrufs einen Ladeindikator anzuzeigen.With ignore filter (Filter ignorieren)
Sie können das Feld ignoreFilter auf true für eine Gruppe setzen, um die interne Suche zu deaktivieren und Ihre eigene Suchlogik zu verwenden.
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>
In diesem Beispiel wird
refDebounced verwendet, um die API-Aufrufe zu debouncen. Der Ladezustand überprüft sowohl den pending-als auch den idle-Status, um eine Ladeanzeige vor und während des Abrufs anzuzeigen.With nachgefilterte Elemente
Sie können das Feld postFilter in einer Gruppe verwenden, um Elemente zu filtern, nachdem die Suche durchgeführt wurde.
<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>
Beginnen Sie mit der Eingabe, um Elemente mit höherer Ebene zu sehen.
With Custom Fuse Search (Deutsche Übersetzung)
Sie können die fuse-Prop verwenden, um die Optionen von useFuse zu überschreiben, die standardmäßig wie folgt lautet:
{
fuseOptions: {
ignoreLocation: true,
threshold: 0.1,
keys: ['label', 'description', 'suffix']
},
resultLimit: 12,
matchAllWhenSearchEmpty: true
}
Die
fuseOptions sind die Optionen von Fuse.js, die resultLimit ist die maximale Anzahl der Ergebnisse, die zurückgegeben werden sollen, und die matchAllWhenSearchEmpty ist ein Boolean, um alle Elemente zu finden, wenn der Suchbegriff leer ist.Sie können zum Beispiel { fuseOptions: { includeMatches: true } } festlegen, um den Suchbegriff in den Elementen hervorzuheben.
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>
Mit Virtualisierung: badge{label="4.1+" class="align-text-top"}
Verwenden Sie die virtualize-Prop, um die Virtualisierung für große Listen als Boolean oder ein Objekt mit Optionen wie { estimateSize: 32, overscan: 12 } zu aktivieren.
Wenn diese Option aktiviert ist, werden alle Gruppen aufgrund einer Einschränkung der Reka-Benutzeroberfläche in eine einzige Liste zusammengefasst.
<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>
Within a Popover (Deutsche Ausgabe)
Sie können die CommandPalette-Komponente innerhalb des Inhalts eines Popover verwenden.
<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>
In einem Modal
Sie können die CommandPalette-Komponente innerhalb eines Modalx-Inhalts verwenden.
<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>
In diesem Beispiel wird
useLazyFetch mit immediate: false verwendet, um nur Daten abzurufen, wenn das Modal geöffnet wird.Innerhalb einer Schublade
Sie können die CommandPalette-Komponente innerhalb eines Drawerx-Inhalts verwenden.
<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>
In diesem Beispiel wird
useLazyFetch mit immediate: false verwendet, um Daten nur beim Öffnen der Schublade abzurufen.Listen Open State (englisch)
Wenn Sie die close-Prop verwenden, können Sie das update:open-Ereignis hören, wenn Sie auf die Schaltfläche klicken.
<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>
Dies kann beispielsweise nützlich sein, wenn Sie die CommandPalette in einem
Modal verwenden.With Fußzeilen-Slot
Verwenden Sie den #footer-Steckplatz, um benutzerdefinierte Inhalte am unteren Rand der CommandPalette hinzuzufügen, z. B. Tastaturkürzel oder zusätzliche Aktionen.
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>
Mit benutzerdefiniertem Slot
Verwenden Sie die slot-Eigenschaft, um ein bestimmtes Element oder eine bestimmte Gruppe anzupassen.
Sie haben Zugriff auf folgende Slots:
#{{ item.slot }}(englisch)#{{ item.slot }}-leading(englisch)#{{ item.slot }}-label(nicht vorhanden)#{{ item.slot }}-trailing(englisch)#{{ group.slot }}(nicht)#{{ group.slot }}-leadingxx38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x38x3#{{ group.slot }}-label(nicht vorhanden)#{{ group.slot }}-trailing(englisch)
<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>
Sie können auch die
#item, #item-leading, #item-label und #item-trailing Steckplätze verwenden, um alle Elemente anzupassen.API (Englisch)
Props (nicht)
| 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 (englisch)
| 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; } |
Emits (englisch)
| 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 Bearbeiten
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 (englisch)
No recent changes