'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
CommandPalette
Cada acción y página, al alcance del teclado con ⌘K.
import { CommandPalette } from '@alea/ui';
Ejemplos
Paleta de comandos
Presiona ⌘K (Ctrl+K) en cualquier lugar, o el botón.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-subtle…--alea-border…--alea-text…--alea-text-faint…--alea-text-muted…
Type
--alea-font-family-body…--alea-font-weight-regular…
Shadow
--alea-shadow-pop…
Component
--alea-glass-blur…--alea-glass-rim…--alea-glass-saturate…--alea-glass-tint…
Props
CommandPalette props
Busca cualquier acción y página desde el teclado (⌘K).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
commandsobligatoria | Command[] | - | Los comandos, en grupos: id, label, icon, shortcut, keywords y onAction. |
emptyText | ReactNode | - | Se muestra cuando nada coincide. |
hotkey | boolean | true | Se abre con ⌘K / Ctrl+K en cualquier lugar. Por defecto true. |
isOpen | boolean | - | Si está abierta (controlado). Sin esto, el atajo la alterna. |
motion | MotionProp | - | Cómo entra y sale (por defecto rise): un preset, false, u opciones. |
onOpenChange | ((open: boolean) => void) | - | Se llama cuando se abre o se cierra. |
placeholder | string | - | Se muestra en el campo de búsqueda. Por defecto "Escribe un comando o busca…". |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Focus
- Motion
- risestaggertintAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-command-overlay.alea-command.alea-command-search.alea-command-input.alea-command-list.alea-command-empty.alea-option-section.alea-option-header.alea-command-item.alea-option-icon.alea-option-text.alea-option-desc
Accesibilidad
- Un diálogo con un campo de búsqueda y un menú de resultados; las flechas se mueven sin salir del campo.
Teclado
| Tecla | Acción |
|---|---|
| ⌘K / Ctrl+K | Lo abre o lo cierra |
| Flechas | Se mueven entre resultados |
| Enter | Ejecuta el comando |
| Escape | Cierra |
Qué hacer y qué evitar
Hacer
- Agrega palabras clave para que encuentren los comandos con otras palabras.
Evitar
- No lo hagas la única forma de llegar a algo.