'/%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
ScrollArea
Una región con scroll, con barras finas según el tema y degradados que indican que hay más.
import { ScrollArea } from '@alea/ui';
Ejemplos
Scroll con degradados
El degradado indica que hay más; la región recibe foco cuando tiene scroll.
v1.24.0: small fixes and new tokens
v1.23.0: small fixes and new tokens
v1.22.0: small fixes and new tokens
v1.21.0: small fixes and new tokens
v1.20.0: small fixes and new tokens
v1.19.0: small fixes and new tokens
v1.18.0: small fixes and new tokens
v1.17.0: small fixes and new tokens
v1.16.0: small fixes and new tokens
v1.15.0: small fixes and new tokens
v1.14.0: small fixes and new tokens
v1.13.0: small fixes and new tokens
v1.12.0: small fixes and new tokens
v1.11.0: small fixes and new tokens
v1.10.0: small fixes and new tokens
v1.9.0: small fixes and new tokens
v1.8.0: small fixes and new tokens
v1.7.0: small fixes and new tokens
v1.6.0: small fixes and new tokens
v1.5.0: small fixes and new tokens
v1.4.0: small fixes and new tokens
v1.3.0: small fixes and new tokens
v1.2.0: small fixes and new tokens
v1.1.0: small fixes and new tokens
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…--alea-border-strong…--alea-focus…
Motion
--alea-motion-duration-base…
Props
ScrollArea props
Una región con scroll, con barras finas según el tema y degradados que indican que hay más. Recibe foco solo cuando tiene scroll.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Nombre, para que se pueda encontrar y desplazar con el teclado. |
className | string | - | Clases extra para el elemento raíz. |
direction | "horizontal" | "vertical" | "both" | 'vertical' | vertical (por defecto), horizontal o both. |
height | string | number | 240 | Altura máxima (o altura) en px o CSS. |
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
directionhorizontalverticalboth- Estados
- Keyboard 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-scroll.alea-scroll-view.alea-scroll-content- Atributos data
data-direction=verticaldata-direction=horizontaldata-startdata-end
Accesibilidad
- Cuando tiene scroll, se vuelve una región con nombre que recibe foco, para que se pueda desplazar con el teclado.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Enfoca el área cuando tiene scroll |
| Flechas, Re Pág / Abajo | Desplázala |
Qué hacer y qué evitar
Hacer
- Dale un aria-label: se vuelve una región con foco cuando tiene scroll.
- Deja suficiente altura para mostrar varias líneas.
Evitar
- No anides áreas con scroll.
- No la uses para esconder contenido que hay que leer.