Command

Um menu de comando com busca e navegação por teclado, ideal para ações rápidas e seleção de itens.

Utilização

index.tsx
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut
} from "@convertcompany/ui";

Exemplos

Com atalhos

Com carregamento

Estado vazio

Implemente um atalho de teclado para abrir o menu de comando. O exemplo abaixo mostra como fazer isso utilizando um Dialog

Pressione ⌘ + J para abrir o menu de comando

Props

O componente Command é uma combinação de vários componentes que trabalham juntos para criar um menu de comando. Ele é construído com a biblioteca cmdk

Command

PropriedadeTipo
classNameClasse CSS adicional para o container do comando.
string
childrenConteúdo do componente.
ReactNode
...propsDemais props do componente base.
CommandPrimitiveProps

CommandInput

PropriedadeTipo
classNameClasse CSS adicional para o input.
string
placeholderTexto exibido quando o campo está vazio.
string
...props
InputHTMLAttributes<HTMLInputElement>

CommandList, CommandEmpty, CommandLoading

PropriedadeTipo
childrenConteúdo a ser exibido.
ReactNode
classNameClasse CSS adicional.
string

CommandGroup

PropriedadeTipo
headingTítulo do grupo.
string
childrenItens do grupo.
ReactNode
classNameClasse CSS adicional.
string

CommandItem

PropriedadeTipo
childrenTexto ou elementos exibidos no item.
ReactNode
classNameClasse CSS adicional.
string
onSelectFunção chamada ao selecionar o item.
(value: string) => void

CommandSeparator

PropriedadeTipo
classNameClasse CSS adicional.
string

CommandShortcut

PropriedadeTipo
childrenTexto do atalho.
ReactNode
classNameClasse CSS adicional.
string