Todos los componentes (204)
Área desplazable
Maquetación · ScrollArea · .amset-scroll
Qué es y cuándo usarlo
Una zona con desplazamiento propio y barras finas del tema: lo que no cabe en su alto (o en su ancho) se recorre dentro, sin mover la página.
Cuándo usarlo
- Un texto largo dentro de un panel o un diálogo (unas condiciones, un registro), una lista de filtros que no puede crecer sin límite, una fila de etiquetas que se desliza de lado.
maxHeightes el alto a partir del cual aparece la barra (una longitud CSS; por defecto,20rem).horizontaldesplaza de lado en vez de hacia abajo, y entonces el alto lo decide el contenido.fadedifumina los bordes por donde queda contenido: con un ratón de rueda la barra no siempre se ve, y es la única señal de que hay más. Al llegar al final, el difuminado de ese lado desaparece solo.labelle pone nombre. Con él pasa a ser una región enfocable: úsalo siempre que dentro no haya nada que se pueda enfocar.
Cuándo no
- Cientos o miles de filas:
VirtualList. Esta zona NO es un desplazamiento virtual: pinta todo lo que lleva dentro. - Dos paneles que el usuario reparte arrastrando:
ResizablePanels. - La página entera: el desplazamiento de la ventana ya es el del navegador.
Teclado: con label es una parada de Tab, y con el foco en ella las flechas, Re Pág, Av Pág, Inicio y Fin la desplazan. Sin label no se le pone tabIndex: si dentro hay enlaces o botones, el tabulador la recorre a través de ellos; si solo hay texto, no todos los navegadores dejan llegar a ella sin ratón.
Accesibilidad: con label es una region con ese nombre, así que el lector la anuncia como región por su nombre y aparece en su lista de zonas; al enfocarla lleva el anillo de foco del sistema. Al llegar al final, la rueda no sigue arrastrando la página de detrás (overscroll-behavior: contain).
Aspecto fino: --amset-scroll-max (el alto máximo; lo escribe maxHeight), --amset-scroll-thumb y --amset-scroll-track (los colores de la barra), --amset-scroll-fade (lo que mide el difuminado) y --amset-scroll-fade-color, el color con el que se funde el borde: tiene que ser el del fondo de debajo (--amset-surface, por defecto), o se ve la banda.
Cómo se ve
1. Plazo de entrega
Los pedidos hechos antes de las 14:00 de un día laborable salen ese mismo día. La entrega en la península tarda de 24 a 48 horas; en Baleares, de 3 a 5 días laborables.
2. Gastos de envío
El envío es gratuito a partir de 60 €. Por debajo de esa cantidad cuesta 4,90 € a la península y 9,90 € a Baleares. Canarias, Ceuta y Melilla llevan además los aranceles de aduana.
3. Seguimiento
Al salir del taller recibes un correo con el número de seguimiento. El transportista avisa por SMS la mañana de la entrega con una franja de dos horas.
4. Ausencia en la entrega
Si no hay nadie, el transportista deja aviso y lo intenta una segunda vez al día siguiente. Después el paquete espera siete días en la oficina más cercana antes de volver al taller.
5. Devoluciones
Tienes 30 días naturales desde la entrega para devolver cualquier pieza sin dar explicaciones. Tiene que llegar sin usar, con su estuche y su certificado de autenticidad.
6. Piezas personalizadas
Los grabados y las tallas a medida no se pueden devolver, salvo defecto de fabricación. Sí se pueden ajustar una vez sin coste durante el primer año.
7. Reembolso
El importe vuelve por el mismo medio de pago en un máximo de 14 días desde que la pieza llega al taller y se revisa. Los gastos del envío original no se reembolsan.
Aurelia
24 piezas
Mareas
18 piezas
Raíz
12 piezas
Constelación
31 piezas
Brisa
9 piezas
Ámbar
15 piezas
Nácar
21 piezas
<ScrollArea label="Condiciones de envío y devolución" maxHeight="14rem" fade>
<Clausulas />
</ScrollArea>
<ScrollArea label="Colecciones" horizontal fade>
<FilaDeTarjetas />
</ScrollArea>Props
Se importa con import { ScrollArea } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | — |
as | "article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span" | — |
className | string | Se une a las clases de la biblioteca, no las sustituye. |
fade | boolean | Difumina los bordes por donde queda contenido. Es la unica señal de que hay mas, y en un raton de rueda no siempre se ve la barra. |
horizontal | boolean | Desplaza en horizontal en vez de en vertical. |
label | string | Nombre de la zona. Con el pasa a ser enfocable y navegable con teclado. |
maxHeight | string | Alto maximo antes de que aparezca la barra. Una longitud CSS. |
style | CSSProperties | — |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
Mandos
Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.
| Variable | Por defecto |
|---|---|
--amset-scroll-max | 20rem |
--amset-scroll-thumb | var(--amset-border-bold) |
--amset-scroll-track | transparent |
--amset-scroll-fade | var(--amset-space-6) |
--amset-scroll-fade-color | var(--amset-surface) |
Cómo se cambia
.amset-scroll {
--amset-scroll-max: ...;
--amset-scroll-thumb: ...;
}En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: