'/%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
Gooey
Formas que se funden como líquido: un selector de píldoras cuya selección fluye al siguiente elemento, un botón del que gotean sus acciones, y el filtro para tus propias formas.
import { GooeyNav, GooeyMenu, Gooey } from '@alea/pro';
Ejemplos
Gooey nav
La selección fluye al siguiente elemento como una gota de líquido. Por debajo es un grupo de radios: las flechas la mueven.
Gooey menu
Las acciones gotean del botón. Escape lo cierra y devuelve el foco.
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-chip-bg…--alea-chip-text…--alea-focus…--alea-surface-deep…--alea-text…--alea-text-muted…
Space
--alea-space-4…
Type
--alea-font-size-md…--alea-font-weight-medium…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…--alea-motion-duration-slower…--alea-motion-ease-emphasized…--alea-motion-ease-out…
Props
Gooey props
Envuelve formas para que se fundan como líquido al tocarse. Pon solo formas adentro; deja el texto en una capa encima.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
strength | number | 10 | |
style | CSSProperties | - |
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.
GooeyNav
- Estados
- HoverSelectedKeyboard focus
- 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-gooey-nav.alea-gooey-nav-blobs.alea-gooey-nav-blob.alea-gooey-nav-items.alea-gooey-nav-item- Atributos data
data-trail
GooeyMenu
- Variantes
directionleftrightupdown- Estados
- Open
- 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-gooey-menu.alea-gooey-menu-blobs.alea-gooey-menu-blob.alea-gooey-menu-actions.alea-gooey-menu-action.alea-gooey-menu-main- Atributos data
data-main
Gooey
- 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-gooey
Accesibilidad
- GooeyNav es un grupo de radios: las flechas mueven la selección, las gotas son decoración oculta para lectores de pantalla.
- El botón de GooeyMenu dice si está expandido; cada acción tiene un nombre; Escape lo cierra y devuelve el foco.
- El texto queda fuera del filtro, así siempre se ve nítido.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | GooeyNav: mueve la selección |
| Enter o Espacio | GooeyMenu: abre, cierra o ejecuta una acción |
| Escape | GooeyMenu: cierra y devuelve el foco |
Qué hacer y qué evitar
Hacer
- Úsalo donde la fusión explica algo: una selección que se mueve, acciones que salen de un botón.
Evitar
- No pongas texto ni íconos dentro de Gooey; el filtro los desenfoca.