'/%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
AppLauncher
La grilla de apps detrás de un botón en el encabezado, para saltar entre los productos de una suite.
import { AppLauncher } from '@alea/ui';
Ejemplos
AppLauncher
Las apps de una suite en una grilla detrás de un botón; las flechas se mueven entre ellas, Enter abre una.
Lumen
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-strong…--alea-accent-subtle…--alea-surface-hover…--alea-surface-raised…--alea-text…
Space
--alea-space-1…--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…--alea-radius-sm…
Type
--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-emphasized…
Props
AppLauncher props
La grilla de apps detrás de un botón en el encabezado, para saltar entre los productos de una suite. Una navegación de enlaces: las flechas se mueven en la grilla, Tab sale.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
appsobligatoria | AppLauncherItem[] | - | Las apps, en orden. |
aria-label | string | - | Nombre del botón. Por defecto "Apps". |
columns | number | 3 | Columnas de la grilla. Por defecto 3. |
moreHref | string | - | Un enlace abajo: "Más apps". |
placement | "bottom end" | "bottom start" | "bottom" | 'bottom end' | Dónde se abre la grilla. Por defecto bottom end. |
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.
- Variantes
placementbottom endbottom startbottom- Estados
- Hover (CSS)
- 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-apps-popover.alea-apps.alea-app.alea-app-icon.alea-app-label.alea-apps-more
Accesibilidad
- El botón tiene nombre ("Apps") y abre un diálogo con un landmark de navegación de enlaces.
- Las flechas recorren la grilla, Inicio y Fin saltan, Tab sale; el foco empieza en la primera app.
- Cada app es un enlace real con una etiqueta visible; el ícono es decoración.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio (en el botón) | Abre la grilla |
| Flechas | Recorren las apps |
| Enter | Abre la app |
| Escape | Cierra y devuelve el foco al botón |
Qué hacer y qué evitar
Hacer
- Mantén el orden estable para que la gente aprenda dónde están las cosas.
- Pon primero las apps más usadas, y el resto detrás de Más apps.
Evitar
- No lo uses para las secciones de una sola app: eso es la navegación.
- No muestres íconos sin etiquetas.
En Figma
Botón y grilla de AppLauncher con un slot por app.