72Başlayın
HextaUI

Command

Satır içi ya da ⌘K paleti olarak eylemlerin aranabilir listesi; sayfalar, kısayollar ve vurgulanmış eşleşmeler içerir.

import {
  IconCalculator,
  IconCalendar,
  IconCreditCard,
  IconMoodSmile,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function CommandDemo() {
  return (
    <Command highlight className="w-full max-w-sm">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <IconCalendar />
            Calendar
          </CommandItem>
          <CommandItem>
            <IconMoodSmile />
            Search Emoji
          </CommandItem>
          <CommandItem disabled>
            <IconCalculator />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem shortcut="mod+p">
            <IconUser />
            Profile
          </CommandItem>
          <CommandItem shortcut="mod+b">
            <IconCreditCard />
            Billing
          </CommandItem>
          <CommandItem shortcut="mod+,">
            <IconSettings />
            Settings
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/command.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
<Command>
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem onSelect={() => openCalendar()}>Calendar</CommandItem>
      <CommandItem shortcut="mod+p">Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Kısayol tuşları Apple cihazlarda ⌘ için, diğer her yerde Ctrl için mod kullanır. Etiketler sizin için platforma göre biçimlendirilir.

Kompozisyon

Command
├── CommandInput
├── CommandList
│   ├── CommandEmpty
│   ├── CommandLoading
│   ├── CommandGroup
│   │   └── CommandItem
│   │       └── CommandShortcut
│   ├── CommandSeparator
│   └── CommandPage
│       └── CommandGroup
└── CommandFooter

CommandDialog
└── Command

Örnekler

Temel

Yazmak, öğeleri siz yazdıkça filtreler ve sıralar. Eşleşmesi olmayan gruplar kaybolur ve liste yüksekliği kalanlara uyacak şekilde animasyonlanır.

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function CommandBasic() {
  return (
    <Command className="w-full max-w-sm">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>Profile</CommandItem>
          <CommandItem>Billing</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Dialog

<CommandDialog /> içine bir <Command /> koyun ve useCommandHotkey ile açıp kapatın. ⌘K veya Ctrl K'ye basın. Öğe kısayolları açıkken çalışır, eşleşmeler vurgulanır ve preserveSearch sorguyu ve seçimi bir sonraki açılış için korur.

"use client"

import * as React from "react"
import {
  IconCalculator,
  IconCalendar,
  IconCheck,
  IconCreditCard,
  IconExternalLink,
  IconMoodSmile,
  IconPalette,
  IconPoint,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPage,
  CommandSeparator,
  CommandShortcut,
  useCommandHotkey,
} from "@/components/ui/command"

export function CommandDialogDemo() {
  const [open, setOpen] = React.useState(false)
  const [last, setLast] = React.useState<string>()
  const [theme, setTheme] = React.useState("System")

  useCommandHotkey("mod+k", () => setOpen((value) => !value))

  const run = (action: string) => {
    setLast(action)
    setOpen(false)
  }

  return (
    <div className="flex flex-col items-center gap-3">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open palette
        <CommandShortcut hotkey="mod+k" />
      </Button>
      <p className="text-sm text-muted-foreground">
        {last ? `Ran “${last}”.` : "Nothing run yet."} Theme: {theme}.
      </p>
      <CommandDialog open={open} onOpenChange={setOpen} preserveSearch>
        <Command highlight>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>
              {(search) => `No results for “${search}”.`}
            </CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem
                shortcut="mod+shift+c"
                onSelect={() => run("Calendar")}
              >
                <IconCalendar />
                Calendar
              </CommandItem>
              <CommandItem onSelect={() => run("Search Emoji")}>
                <IconMoodSmile />
                Search Emoji
              </CommandItem>
              <CommandItem disabled>
                <IconCalculator />
                Calculator
              </CommandItem>
              <CommandItem page="theme" pageTitle="Theme">
                <IconPalette />
                Change theme…
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem shortcut="mod+p" onSelect={() => run("Profile")}>
                <IconUser />
                Profile
              </CommandItem>
              <CommandItem shortcut="mod+b" onSelect={() => run("Billing")}>
                <IconCreditCard />
                Billing
              </CommandItem>
              <CommandItem
                shortcut="mod+,"
                keywords={["preferences", "options"]}
                onSelect={() => run("Settings")}
              >
                <IconSettings />
                Settings
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Links">
              <CommandItem href="/docs" onSelect={() => setOpen(false)}>
                <IconExternalLink />
                All components
              </CommandItem>
            </CommandGroup>
            <CommandPage id="theme">
              <CommandGroup heading="Theme">
                {["Light", "Dark", "System"].map((option) => (
                  <CommandItem
                    key={option}
                    onSelect={() => {
                      setTheme(option)
                      run(`Theme: ${option}`)
                    }}
                  >
                    {option === theme ? <IconCheck /> : <IconPoint />}
                    {option}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandPage>
          </CommandList>
          <CommandFooter />
        </Command>
      </CommandDialog>
    </div>
  )
}

Sayfalar

page içeren bir öğe eşleşen <CommandPage /> bileşenini açar. Sayfa başlığı girdide bir chip olarak görünür, liste yandan kayarak gelir; boş aramada Backspace veya Escape geri döner.

"use client"

import * as React from "react"
import {
  IconBrandGithub,
  IconFolder,
  IconFolderPlus,
  IconUsers,
} from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPage,
} from "@/components/ui/command"

const projects = ["hextaui", "marketing-site", "design-tokens"]
const members = ["Ada Lovelace", "Grace Hopper", "Alan Turing"]

export function CommandPages() {
  const [last, setLast] = React.useState<string>()

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Command>
        <CommandInput placeholder="Search…" />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Workspace">
            <CommandItem page="projects" pageTitle="Projects">
              <IconFolder />
              Projects
            </CommandItem>
            <CommandItem page="members" pageTitle="Members">
              <IconUsers />
              Members
            </CommandItem>
            <CommandItem onSelect={() => setLast("New project")}>
              <IconFolderPlus />
              New project
            </CommandItem>
          </CommandGroup>
          <CommandPage id="projects">
            <CommandGroup heading="Projects">
              {projects.map((project) => (
                <CommandItem key={project} onSelect={setLast}>
                  <IconBrandGithub />
                  {project}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandPage>
          <CommandPage id="members">
            <CommandGroup heading="Members">
              {members.map((member) => (
                <CommandItem key={member} onSelect={setLast}>
                  <IconUsers />
                  {member}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandPage>
        </CommandList>
      </Command>
      <p className="text-sm text-muted-foreground">
        {last ? `Selected “${last}”.` : "Nothing selected yet."}
      </p>
    </div>
  )
}

Kaydırılabilir

Uzun listeler sınırlı bir yükseklik içinde kayar. Klavyeyle ilerlerken seçili öğe her zaman görünümde tutulur.

import { IconFileText } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

const documents = Array.from({ length: 60 }, (_, index) => ({
  id: index + 1,
  title: `Document ${String(index + 1).padStart(2, "0")}`,
}))

export function CommandScrollable() {
  return (
    <Command className="w-full max-w-sm">
      <CommandInput placeholder="Search 60 documents…" />
      <CommandList>
        <CommandEmpty>No documents match.</CommandEmpty>
        <CommandGroup heading="Documents">
          {documents.map((doc) => (
            <CommandItem key={doc.id}>
              <IconFileText />
              {doc.title}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Asenkron sonuçlar

shouldFilter={false} ayarlayın ve çektiğiniz sonuçları render edin. <CommandLoading /> görünmeden önce 150 ms bekler, sonra en az 300 ms kalır; böylece hızlı yanıtlar asla bir spinner'ı yanıp söndürmez. İki gecikmeyi de deneyin.

"use client"

import * as React from "react"
import { IconUser } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandLoading,
  useCommandLoading,
} from "@/components/ui/command"

const people = [
  "Ada Lovelace",
  "Alan Turing",
  "Grace Hopper",
  "Katherine Johnson",
  "Linus Torvalds",
  "Margaret Hamilton",
  "Tim Berners-Lee",
]

export function CommandAsync() {
  const [query, setQuery] = React.useState("")
  const [results, setResults] = React.useState(people)
  const [loading, setLoading] = React.useState(false)
  const [latency, setLatency] = React.useState(700)
  const pending = useCommandLoading(loading)
  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  React.useEffect(() => () => clearTimeout(timerRef.current), [])

  const search = (nextQuery: string, nextLatency: number) => {
    clearTimeout(timerRef.current)
    setLoading(true)
    timerRef.current = setTimeout(() => {
      setResults(
        people.filter((person) =>
          person.toLowerCase().includes(nextQuery.toLowerCase())
        )
      )
      setLoading(false)
    }, nextLatency)
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex gap-2">
        {[80, 700].map((ms) => (
          <Button
            key={ms}
            size="sm"
            variant={latency === ms ? "secondary" : "outline"}
            onClick={() => {
              setLatency(ms)
              search(query, ms)
            }}
          >
            {ms} ms
          </Button>
        ))}
      </div>
      <Command shouldFilter={false} highlight>
        <CommandInput
          placeholder="Search people…"
          value={query}
          onValueChange={(next) => {
            setQuery(next)
            search(next, latency)
          }}
        />
        <CommandList>
          <CommandLoading loading={loading}>Searching…</CommandLoading>
          <CommandEmpty>
            {(value) => `No people match “${value}”.`}
          </CommandEmpty>
          {pending ? null : (
            <CommandGroup heading="People">
              {results.map((person) => (
                <CommandItem key={person}>
                  <IconUser />
                  {person}
                </CommandItem>
              ))}
            </CommandGroup>
          )}
        </CommandList>
      </Command>
    </div>
  )
}

Uzun içerik

Başlıklar sarar, uzun adlar seçiminize göre kısaltılır veya sarar ve kısayollar asla dışarı itilmez.

import { IconFileText } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export function CommandLongContent() {
  return (
    <Command className="w-full max-w-72">
      <CommandInput placeholder="Search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="A group heading that is long enough to wrap onto two lines">
          <CommandItem>
            <IconFileText />
            <span className="min-w-0 truncate">
              quarterly-planning-final-final-v2-reviewed-by-legal.pdf
            </span>
            <CommandShortcut>⌘⇧O</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <IconFileText />
            <span className="min-w-0 wrap-anywhere">
              averyveryverylongunbrokenfilenamethatshouldwrapinsteadofescaping.txt
            </span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Sağdan sola

Simgeler, kısayollar, sayfa chip'i ve sayfa kayması okuma yönünü izler.

import { IconCalendar, IconSettings } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export function CommandRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <Command dir="rtl">
        <CommandInput placeholder="ابحث عن أمر…" />
        <CommandList>
          <CommandEmpty>لا توجد نتائج.</CommandEmpty>
          <CommandGroup heading="اقتراحات">
            <CommandItem>
              <IconCalendar />
              التقويم
              <CommandShortcut>⌘T</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <IconSettings />
              الإعدادات
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  )
}

Klavye

TuşAction
↓Sonraki öğeyi seçer.
↑Önceki öğeyi seçer.
Alt↓Sonraki grubun ilk öğesine atlar.
Alt↑Önceki grubun ilk öğesine atlar.
Homeİlk öğeyi seçer.
EndSon öğeyi seçer.
CtrlNSonraki öğeyi seçer. Ctrl J de çalışır. vimBindings ile kapatın.
CtrlPÖnceki öğeyi seçer. Ctrl K de çalışır. vimBindings ile kapatın.
EnterSeçili öğeyi çalıştırır. Bir bağlantı öğesinde ⌘ Enter veya Ctrl Enter onu yeni bir sekmede açar.
EscÖnce aramayı temizler, sonra bir sayfa geri gider, sonra diyaloğu kapatır.
BackspaceArama boşken bir sayfa geri gider.
⌘PHerhangi bir öğe kısayolu, odak komut menüsünün içindeyken öğesini çalıştırır.

Erişilebilirlik

  • Girdi, seçili öğeyi işaret eden bir combobox'tır; böylece ekran okuyucular ilerledikçe her öğeyi duyurur.
  • Kibar (polite) bir canlı bölge, yazmayı bıraktıktan kısa süre sonra sonuç sayısını ve bir sayfayı açtığınızda veya terk ettiğinizde sayfa başlığını duyurur. İfadeyi formatResults ve rootTitle ile değiştirin.
  • <CommandDialog /> gizli bir başlığa ve açıklamaya sahiptir, açıkken odağı hapseder ve kapandığında trigger'a geri verir.
  • Öğe kısayolları aria-keyshortcuts ile sunulur.
  • Azaltılmış hareket açıkken öğeler onay yanıp sönmesi olmadan çalışır ve sayfalar kaymak yerine solar.

API referansı

cmdk üzerine kuruludur; <CommandDialog /> Base UI dialog üzerindedir. Parçalar, sardıkları cmdk parçasının prop'larını kabul eder.

Command

PropTürVarsayılan
labelMenünün erişilebilir adı.
string"Command menu"
highlightHer öğedeki eşleşen harfleri vurgular ve geri kalanını soluklaştırır.
booleanfalse
shouldFilterÖğeleri kendiniz filtrelemek ve sıralamak için false yapın; örneğin sonuçlar bir sunucudan geldiğinde.
booleantrue
filter0 (gizli) ile 1 (en iyi eşleşme) arasında bir puan döndürür.
(value: string, search: string, keywords?: string[]) => number–
valueSeçili öğenin değeri.
string–
defaultValue
string–
onValueChange
(value: string) => void–
loopListenin uçlarında başa sarın.
booleanfalse
vimBindingsCtrl N, J, P ve K ile gezinme.
booleantrue
disablePointerSelection
booleanfalse
formatResultsYazdıktan sonra ekran okuyuculara duyurulan metin.
(count: number) => string"3 results"
rootTitleSon sayfadan ayrılıp köke döndüğünüzde duyurulur.
string"All commands"
ÖznitelikAçıklama
data-slot="command"CSS'te kökü hedefleyin.
data-highlightingVurgu açıkken ve arama boş değilken bulunur.
--command-radiusDış yarıçap. Öğeler ondan eş merkezli bir yarıçap türetir.
--command-insetListe kenarı ile öğeleri arasındaki dolgu.

CommandDialog

PropTürVarsayılan
open
boolean–
defaultOpen
booleanfalse
onOpenChange
(open: boolean, details) => void–
preserveSearchSorgu, sayfa ve seçimin kapatmadan sonra korunması için diyaloğu bağlı (mounted) tutun. Yeniden açıldığında sorgu seçili olur.
booleanfalse
titleGörsel olarak gizli diyalog başlığı.
string"Command menu"
descriptionGörsel olarak gizli diyalog açıklaması.
string"Search for a command to run."
showCloseButton
booleanfalse
classNameDiyalog popup'ına uygulanır.
string–
ÖznitelikAçıklama
data-slot="command-dialog"Diyalog popup'ı.
data-slot="command-dialog-overlay"Arka plan.
data-openAçıkken popup üzerinde bulunur.

CommandInput

PropTürVarsayılan
valueKontrollü arama metni.
string–
onValueChange
(search: string) => void–
placeholder
string–
clearLabelTemizle düğmesinin erişilebilir adı.
string"Clear search"
backLabelSayfa chip'inin erişilebilir adı.
(title: string) => string(title) => `Back from ${title}`
ÖznitelikAçıklama
data-slot="command-input"Girdi.
data-slot="command-input-wrapper"Simgeyi, girdiyi ve temizle düğmesini tutan satır.
data-slot="command-clear"Yazmaya başlayınca gösterilen temizle düğmesi.
data-slot="command-page-chip"Bir sayfada gösterilen geri chip'i.

CommandList

PropTürVarsayılan
labelListenin erişilebilir adı.
string–
ÖznitelikAçıklama
data-slot="command-list"Liste.
data-settledListe kendini ölçtükten sonra bulunur. Yükseklik geçişi yalnızca bu ayarlıyken çalışır.
--cmdk-list-heightListeyi animasyonlamak için kullanılan, görünen öğelerin yüksekliği.

CommandEmpty

PropTürVarsayılan
childrenSorguyu yansıtmak için fonksiyon biçimini kullanın.
ReactNode | (search: string) => ReactNode–
ÖznitelikAçıklama
data-slot="command-empty"Listede bir CommandLoading varken gizlenir.

CommandLoading

PropTürVarsayılan
loading
booleantrue
delaySpinner gösterilmeden önce beklenecek milisaniye.
number150
minDurationSpinner göründükten sonra kalacağı asgari milisaniye.
number300
labelErişilebilir etiket. Varsayılan olarak string alt öğelerdir.
string–
progress
number–
ÖznitelikAçıklama
data-slot="command-loading"Yükleme satırı.
data-pendingGecikme sırasında, satır duyurulmuş ama henüz görünür değilken bulunur.

CommandGroup

PropTürVarsayılan
heading
ReactNode–
valueBaşlık yoksa zorunludur.
string–
forceMountFiltreleme sırasında grubu görünür tutun.
booleanfalse
ÖznitelikAçıklama
data-slot="command-group"Grup.
[cmdk-group-heading]Başlık öğesi.

CommandItem

PropTürVarsayılan
onSelectTıklamada, Enter'da veya öğenin kısayolunda, onay yanıp sönmesinden sonra çalışır.
(value: string) => void–
valueFiltreleme için kullanılır. Varsayılan olarak, kısayol hariç öğenin metnidir.
string–
keywordsBu öğeyle eşleşen ek kelimeler.
string[]–
disabled
booleanfalse
shortcut"mod+shift+c" gibi bir kısayol tuşu. Öğe üzerinde gösterilir ve odak menüdeyken onu çalıştırır.
string–
pageÇalıştırmak yerine bu id'ye sahip CommandPage'i açar.
string–
pageTitleSayfa chip'inde gösterilen başlık. Varsayılan olarak değerdir.
string–
hrefÖğeyi bağlantı olarak render eder. Enter onu izler, ⌘ veya Ctrl Enter yeni bir sekme açar.
string–
renderBunun yerine render edilecek bir bağlantı öğesi, örneğin Next.js <Link />.
ReactElement–
confirmSeçimin fark edilmesi için öğeyi çalıştırmadan önce kısaca yanıp söndürün.
booleantrue
forceMountFiltreleme sırasında öğeyi görünür tutun.
booleanfalse
ÖznitelikAçıklama
data-slot="command-item"Öğe.
data-selected="true"Seçili öğede bulunur.
data-disabled="true"Devre dışı öğelerde bulunur.
data-valueFiltreleme için kullanılan değer.
data-confirmingOnay yanıp sönmesi sırasında bulunur.
data-pageBir sayfa açan öğelerde bulunur.

CommandPage

PropTürVarsayılan
idOnu açan öğenin page prop'uyla eşleşir. Grupları ve öğeleri yalnızca geçerli sayfa olduğunda render edilir.
string–

CommandShortcut

PropTürVarsayılan
hotkey"mod+k" gibi bir kısayol tuşunu geçerli platform için biçimlendirir. Alt öğeler bunu geçersiz kılar.
string–
ÖznitelikAçıklama
data-slot="command-shortcut"Kısayol etiketi.

CommandSeparator

PropTürVarsayılan
alwaysRenderArama sırasında görünür tutun.
booleanfalse
ÖznitelikAçıklama
data-slot="command-separator"Ayırıcı.

CommandFooter

PropTürVarsayılan
childrenVarsayılan olarak bir sayfada güncellenen tuş ipuçlarıdır. Dokunmatik ekranlarda gizlenir.
ReactNode–
ÖznitelikAçıklama
data-slot="command-footer"Alt bilgi.

useCommandHotkey

const [open, setOpen] = React.useState(false)

useCommandHotkey("mod+k", () => setOpen((value) => !value))
PropTürVarsayılan
hotkeyTüm belgede dinlenir. Değiştirici tuşu olmayan kısayol tuşları, bir alana yazılırken yok sayılır.
string–
callback
(event: KeyboardEvent) => void–
options.enabled
booleantrue

useCommandLoading

Bir yükleme göstergesinin görünür olup olmayacağını, <CommandLoading /> ile aynı gecikme ve asgari süreyle döndürür. Bir istek sürerken eski sonuçları gizlemek için kullanın.

PropTürVarsayılan
loading
boolean–
options.delay
number150
options.minDuration
number300

Diğer hook'lar

  • useCommandPages() sayfaları kendi kodunuzdan yönetmek için { pages, page, push, pop, reset } döndürür.
  • useCommandState(selector) arama veya filtrelenmiş sayı gibi cmdk state'ini okur.
  • useHotkeyLabel(hotkey) bir kısayol tuşunu geçerli platform için, örneğin ⌘K veya Ctrl+K olarak biçimlendirir.

İlgili

Kullanıldığı bloklar

Command üzerine kurulan bloklar.