'/%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}
Capas
KeyboardShortcuts
Todos los atajos de teclado de una app en un diálogo con búsqueda, que se abre con "?" desde cualquier lugar. La tecla modificadora principal se muestra como la de cada sistema (⌘ o Ctrl), y las secuencias se leen como "G luego I".
import { KeyboardShortcuts } from '@alea/ui';
Ejemplos
Atajos
Presiona ? en cualquier lugar de esta página (fuera de un campo de texto), o el botón. Busca por lo que hace un atajo; "mod" se muestra como la tecla modificadora principal de cada sistema (⌘ o Ctrl).
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-border…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-6…--alea-space-8…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Props
KeyboardShortcuts props
Todos los atajos de teclado de una app en un diálogo con búsqueda, que se abre con "?" desde cualquier lugar. La tecla modificadora principal se muestra como la de cada sistema (⌘ o Ctrl); las secuencias ("G luego I") se leen como tales.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
groupsobligatoria | { title: string; shortcuts: Shortcut[]; }[] | - | Los atajos en grupos: Navegación, Acciones, Edición. |
isOpen | boolean | - | Abierto (controlado). Omítelo y pasa openKey para abrirlo desde el teclado. |
onOpenChange | ((open: boolean) => void) | - | Se llama cuando se abre o se cierra. |
openKey | string | false | '?' | Una tecla que lo abre desde cualquier lugar (fuera de campos de texto). Por defecto "?". |
title | ReactNode | - | El título. Por defecto "Atajos de teclado". |
trigger | ReactNode | - | Un botón que lo abre. |
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.
- 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-kbs-empty.alea-kbs.alea-kbs-group.alea-kbs-title.alea-kbs-list.alea-kbs-row.alea-kbs-combo.alea-kbs-then.alea-kbd
Accesibilidad
- Un diálogo modal con título; el campo de búsqueda recibe el foco al abrirse.
- Cada atajo es un término de descripción (qué hace) y sus teclas, así los lectores de pantalla leen "Buscar, Comando K".
- "?" lo abre solo fuera de los campos de texto, así escribir un signo de interrogación en un formulario nunca lo abre.
Teclado
| Tecla | Acción |
|---|---|
| ? | Lo abre desde cualquier lugar fuera de un campo de texto |
| Escape | Lo cierra |
Qué hacer y qué evitar
Hacer
- Agrupa los atajos como está organizada la app: Navegación, Acciones, Edición.
- Usa "mod" para el modificador principal, así cada plataforma ve su propia tecla.
Evitar
- No listes atajos que no están conectados.
- No ocupes teclas que usan el navegador o los lectores de pantalla.
En Figma
KeyboardShortcuts como un diálogo con grupos de filas y teclas.