'/%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}
Maquetación
Affix y FloatButton
Mantén una barra a la vista una vez que llega arriba, y un botón flotante sobre la página. FloatButton puede llevar un texto (un botón flotante extendido) que se reduce al ícono al bajar con scroll, en dos tamaños y dos formas.
import { Affix, FloatButton, BackToTop } from '@alea/ui';
Ejemplos
FloatButton
Una acción frecuente, o unas pocas que se despliegan.
The buttons float in this card's corner (position="absolute"); on a page they stay fixed to the screen.
Affix
Se queda fijo cuando llega arriba de la página; data-stuck te deja cambiar su estilo.
3 selected
Botón flotante extendido
label muestra texto junto al ícono; collapseOnScroll lo reduce al ícono al bajar y lo vuelve a agrandar al subir. shape="rounded" y size="sm" cambian su aspecto.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…
Layer
--alea-z-sticky…
Props
Affix props
Se queda fijo arriba al llegar ahí con el scroll, y te avisa cuándo (data-stuck para estilos).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra para el elemento raíz. |
offsetTop | number | 0 | Distancia desde arriba mientras está fijo, en px. Por defecto 0. |
onChange | ((stuck: boolean) => void) | - | Se llama cuando se fija o se suelta (para cambiar su aspecto). |
FloatButton props
Un botón redondo que flota sobre la página para una acción frecuente, o unas pocas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Qué hace; también es el tooltip. |
iconobligatoria | ReactNode | - | El ícono. |
actions | { icon: ReactNode; label: string; onPress: () => void; }[] | - | Botones extra que se despliegan encima al presionarlo. |
collapseOnScroll | boolean | - | Con label: se reduce al ícono al bajar con scroll y vuelve a crecer al subir. |
label | ReactNode | - | Texto visible junto al ícono: un botón flotante extendido ("Nuevo mensaje"). |
onPress | (() => void) | - | Se llama al presionar el botón principal (cuando no hay actions). |
placement | "bottom-end" | "bottom-start" | 'bottom-end' | Esquina donde se ubica. Por defecto bottom-end. |
position | "fixed" | "absolute" | 'fixed' | fixed al viewport (por defecto), o absolute dentro de un padre posicionado. |
shape | "rounded" | "circle" | - | circle (por defecto) o rounded (un cuadrado redondeado). |
size | "sm" | "md" | - | md (56 px, por defecto) o sm (44 px). |
variant | "primary" | "secondary" | 'primary' | primary: el degradado oscuro; secondary: el chip. |
BackToTop props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
position | "fixed" | "absolute" | 'fixed' | fixed a la ventana (por defecto) o absolute dentro de un padre posicionado. |
threshold | number | 400 | Distancia de scroll antes de mostrarse, en px. Por defecto 400. |
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.
Affix
- 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-affix- Atributos data
data-stuck
FloatButton
- Variantes
placementbottom-endbottom-startpositionfixedabsoluteshaperoundedcirclesizesmmdvariantprimarysecondary- Estados
- Open
- Motion
- liftpress
- 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-float.alea-float-actions.alea-float-btn.alea-float-small.alea-button-icon.alea-float-icon.alea-float-label- Atributos data
data-placement=bottom-startdata-position=absolutedata-shape=roundeddata-size=smdata-extendeddata-collapsed
Accesibilidad
- FloatButton necesita un aria-label; su tooltip lo repite.
- Con actions, el botón principal dice si se muestran (aria-expanded).
Qué hacer y qué evitar
Hacer
- Usa un botón flotante por página, para la acción más frecuente.
Evitar
- No tapes contenido que la gente necesita; deja espacio abajo.