'/%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
SettingsSection
La estructura de una página de ajustes: grupos con un título y una línea de ayuda, y filas con el nombre y su ayuda a la izquierda y el control a la derecha. Las filas se apilan según el ancho de su propia sección.
import { SettingsSection, SettingRow } from '@alea-design/ui';
Ejemplos
Sección de ajustes
Un título, una línea de ayuda y filas: el nombre y su ayuda a la izquierda, el control a la derecha.
Simple, con acciones
appearance="plain" quita el panel para que la sección quepa dentro de una Card o un Modal. actions va a la derecha del título.
Filas con campos
El control va a la derecha y se pone su propio aria-label. En una sección estrecha pasa debajo del texto: cambia el tamaño de la ventana.
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-surface…--alea-text…--alea-text-muted…
Space
--alea-space-0-5…--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-leading-normal…--alea-font-size-base…--alea-font-size-sm…--alea-font-weight-semibold…
Props
SettingsSection props
Un grupo en una página de ajustes: un título, una línea de ayuda y las filas debajo en un solo panel. La región toma su nombre del título. Las filas son SettingRow.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | Las SettingRow, o cualquier contenido como un Form. | |
titleobligatoria | ReactNode | El nombre del grupo de ajustes ("Notificaciones"). | |
actions | ReactNode | ninguno | Botones o un menú a la derecha del título. |
appearance | "plain" | "card" | "card" | card (predeterminado): las filas van en un panel con borde. plain: sin panel, solo líneas entre filas, para ajustes dentro de una Card o un Modal. |
description | ReactNode | ninguno | Una línea bajo el título que dice para qué sirve el grupo. |
headingLevel | 2 | 3 | 4 | 5 | 2 | Nivel de encabezado del título. Por defecto 2. |
SettingRow props
Un ajuste: el nombre y su ayuda a la izquierda, el control a la derecha. Se apila en secciones estrechas. Úsalo dentro de SettingsSection.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | Qué es el ajuste ("Resumen semanal"). | |
children | ReactNode | ninguno | El control: Switch, Select, Button, SegmentedControl, un campo. Va a la derecha y pasa debajo del texto cuando la sección es estrecha. |
description | ReactNode | ninguno | Qué hace, en una frase. |
htmlFor | string | ninguno | El id del control, cuando hay un solo campo: el título pasa a ser su etiqueta. Omítelo para un Switch o un grupo y dale a ese control su propia etiqueta. |
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.
SettingsSection
- Variantes
appearanceplaincard- 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-settings.alea-settings-head.alea-settings-text.alea-settings-title.alea-settings-desc.alea-settings-actions.alea-settings-rows- Atributos data
data-appearance=plain
SettingRow
- 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-setting.alea-setting-text.alea-setting-title.alea-setting-desc.alea-setting-control- Atributos data
data-appearance=plain
Accesibilidad
- Cada sección es una región con el nombre de su título, y el título es un encabezado (nivel 2 por defecto; ajusta headingLevel al esquema de la página).
- Una fila es un grupo con el nombre de su título y descrito por su texto de ayuda, así que un lector de pantalla dice ambos cuando el foco entra en un control dentro de ella.
- Cuando una fila contiene un solo campo, htmlFor convierte el título en la etiqueta de ese campo. Si no, el control necesita su propio aria-label.
- Las filas se apilan según el ancho de la sección, no el de la ventana, así que la estructura aguanta en un panel estrecho o con zoom al 400 por ciento.
Qué hacer y qué evitar
Hacer
- Pon un tema en cada sección y limítala a unas siete filas.
- Escribe el título como un sustantivo ("Resumen semanal") y la ayuda como una frase.
- Usa appearance="plain" cuando la sección está dentro de una Card o un Modal, para no tener un panel dentro de un panel.
- Pon una acción de peligro en su propia sección al final.
Evitar
- No apiles una Card por cada ajuste.
- No pongas formularios largos en una fila: usa un Form debajo de la sección.
- No escondas la única forma de guardar: los ajustes que necesitan guardarse van en un Form con FormActions.