Command
Paleta de comandos para buscar e executar ações. Suporta navegação por teclado e modo dialog.
Demonstração
No results found.
📅 Calendar
🔍 Search
⚙️ Settings
📄 New File⌘N
📂 Open⌘O
Command Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
children | ReactNode | — | Conteúdo do Command (Input, List, Groups, Items) |
value | string | — | Valor de busca controlado |
onValueChange | (value: string) => void | — | Callback quando a busca muda |
CommandDialog Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
open | boolean | — | Controla visibilidade do dialog |
onOpenChange | (open: boolean) => void | — | Callback quando estado open muda |
Uso
import {
Command, CommandDialog, CommandInput, CommandList,
CommandEmpty, CommandGroup, CommandItem,
CommandSeparator, CommandShortcut,
} from '@ghiberti85/ui'
// Inline panel
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem value="new">New File <CommandShortcut>⌘N</CommandShortcut></CommandItem>
</CommandGroup>
</CommandList>
</Command>
// Dialog palette (⌘K)
const [open, setOpen] = useState(false)
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandItem value="home">Home</CommandItem>
</CommandList>
</CommandDialog>