'/%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}
EfectosAlea Pro
Dock
Una fila de botones de ícono que crecen cuando se acerca el puntero, como un dock de escritorio: un lanzador de apps divertido o una barra de herramientas flotante.
import { Dock } from '@alea/pro';
Ejemplos
Dock
Los botones de ícono crecen cuando se acerca el puntero, como un dock de escritorio. Una barra de herramientas de botones con nombre; las flechas y Tab funcionan como siempre.
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-surface…--alea-surface-raised…--alea-text…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-lg…--alea-radius-md…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Component
--alea-dock-s…
Props
Dock props
Una fila de botones de ícono que crecen cuando se acerca el puntero, como un dock de escritorio. Cada elemento es un botón real con nombre.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | { id: string; icon: ReactNode; label: string; onPress?: (() => void) | undefined; }[] | - | |
className | string | - | |
magnification | number | 1.6 |
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-dock-item.alea-dock
Accesibilidad
- Una barra de herramientas de botones reales, cada uno con un nombre (también mostrado como tooltip).
- La ampliación solo sigue a un puntero preciso y se apaga con movimiento reducido.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Se mueve por los botones |
| Enter o Espacio | Presiona uno |
Qué hacer y qué evitar
Hacer
- Da a cada botón un nombre corto: se muestra como tooltip.
- Limítalo a las pocas acciones que la gente más usa.
Evitar
- No lo uses como única navegación en pantallas táctiles, donde nada se amplía.
- No pongas más de unos diez botones.