Todos los componentes (204)

Plegable

Estructura · Collapsible · .amset-collapsible

Qué es y cuándo usarlo

Un bloque que se pliega, suelto: «Ver más», «Detalles del envío», un filtro avanzado que no estorba hasta que hace falta.

Cuándo usarlo

Cuando es UNA sección y va dentro de algo que ya está pintado. No trae caja ni rayas a propósito.
arrowEnd para una fila de ajustes, donde el título manda a la izquierda.
defaultExpanded para que empiece abierto; expanded con onExpandedChange para llevar el estado desde fuera.

Cuándo no

Si son dos o más y van juntas, es un Accordion: trae la caja, las rayas y la posibilidad de que solo haya una abierta.
Para esconder algo que aparece encima del contenido, Dropdown.

Por qué no es un <details>: el <summary> nativo no admite un título con estructura dentro sin romper el nombre accesible, y un clic en él cambia open por su cuenta, sin pasar por el estado de React. Aquí el disparador es un <button> de verdad.

Teclado: Tab llega al disparador; Intro y Espacio lo abren y lo cierran. Con disabled no coge el foco.

Accesibilidad: el disparador lleva aria-expanded y aria-controls, y el panel se llama como él. Cerrado, el panel va con hidden="until-found": el buscador del navegador (Ctrl+F) encuentra su texto y lo abre. Al cerrarse con el foco DENTRO del panel, el foco vuelve al disparador. Sin eso el navegador lo dejaría en el body y quien navega con teclado tendría que empezar a tabular desde el principio de la página. Con el dedo, el disparador llega a los 44 px.

Aspecto fino: --amset-collapsible-font, --amset-collapsible-gap (el hueco entre el título y el texto, que solo existe abierto: cerrado, el plegable mide lo que mide su título),--amset-collapsible-color, --amset-collapsible-arrow y --amset-collapsible-inset.

Cómo se ve

<Collapsible title="Detalle del envio">
  <Text>Salio el 1 de octubre de Madrid.</Text>
</Collapsible>

Props

Se importa con import { Collapsible } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`title`obligatoria	`ReactNode`	Lo que se lee en el disparador. Es el nombre del panel.
`arrowEnd`	`boolean`	La flecha a la derecha, para una fila de ajustes.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultExpanded`	`boolean`	Abierto al empezar. Para lo que se usa casi siempre.
`disabled`	`boolean`	—
`expanded`	`boolean`	Controlado desde fuera. Con esto hay que pasar `onExpandedChange`.
`onExpandedChange`	`(expanded: boolean) => void`	—
`size`	`"sm" \| "md" \| "lg"`	—

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-collapsible-font`	`var(--amset-text-base)`
`--amset-collapsible-gap`	`var(--amset-space-2)`
`--amset-collapsible-color`	`var(--amset-ink)`
`--amset-collapsible-arrow`	`var(--amset-ink-2)`
`--amset-collapsible-inset`	`var(--amset-space-5)`

Cómo se cambia

.amset-collapsible {
  --amset-collapsible-font: ...;
  --amset-collapsible-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: