'/%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
Spoiler
Contenido largo recortado a una altura con un degradado y Ver más.
import { Spoiler } from '@alea/ui';
Ejemplos
Ver más
Recortado a 80 px con un degradado.
Alea is a design system with its own look, built so keyboard, focus and screen reader behavior come right from the start. Every component has a matching Figma component made from the same tokens, in dark and light. The docs show live examples from real files, the props come from the TypeScript types, and every page is checked with axe in both themes. Charts read their points aloud, tables can be edited inline, and the editor never renders raw HTML.
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-bg…
Space
--alea-space-2…
Type
--alea-font-size-sm…
Motion
--alea-motion-duration-slow…--alea-motion-ease-out…
Props
Spoiler props
Contenido largo recortado a una altura con un degradado y un botón Ver más.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra para el elemento raíz. |
hideLabel | string | - | Texto del botón que contrae. Por defecto "Ver menos". |
maxHeight | number | 120 | Altura mostrada antes de "Ver más", en px. Por defecto 120. |
showLabel | string | - | Texto del botón que expande. Por defecto "Ver más". |
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.
- Estados
- Open
- Motion
- expandhint
- 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-spoiler.alea-spoiler-body.alea-link.alea-spoiler-toggle- Atributos data
data-long
Accesibilidad
- El botón tiene aria-expanded y controla el contenido.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Muestra más o menos |
Qué hacer y qué evitar
Hacer
- Muestra suficiente texto antes del corte para que se sepa qué hay adentro.
- Haz el texto del botón específico cuando ayude (Ver las 12 funciones).
Evitar
- No escondas información obligatoria.
- No cortes en medio de una tabla o un elemento de lista.