Accordion

Acordeón con elementos colapsables, comportamiento a nivel de acordeón, y control de estado inicial.

Paquete: @solidiom/accordion
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

El ejemplo interactivo demuestra un acordeón colapsable de expansión individual. Presiona ArrowDown/ArrowUp para mover el foco entre los triggers, Home/End para saltar al primer o último trigger, y Enter o Space para alternar la sección con foco.

import * as Accordion from "@solidiom/accordion"

;<Accordion.Root type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>¿Qué es Solidiom?</Accordion.Trigger>
    <Accordion.Content>
      Un kit de componentes para SolidJS construido sobre HTML semántico, accesible por defecto.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>¿Es accesible?</Accordion.Trigger>
    <Accordion.Content>
      Sí, sigue las Prácticas de Autoría WAI-ARIA para patrones de acordeón.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Opciones a nivel de acordeón

La propiedad type controla si los elementos son independientes (multiple) o mutuamente excluyentes (single). Con collapsible, todos los elementos pueden cerrarse simultáneamente.

Un kit de componentes para SolidJS construido sobre HTML semántico, accesible por defecto.

Ver código fuente

        export function Root(props: AccordionRootProps) {
  const multiple = (props.type ?? "single") === "multiple"
  const collapsible = props.collapsible ?? false

  const { value, requestChange } = createControllableValue<string[], AccordionReason>({
    value: props.value,
    defaultValue: props.defaultValue ?? [],
    onChange: props.onValueChange,
    equals: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]),
  })

  const collection = createCollection({ orientation: () => "vertical" })

  const requestValueChange = (next: string[], details: ChangeDetails<AccordionReason>): void => {
    requestChange(next, details)
  }

  const ctx: AccordionContextValue = {
    value,
    requestValueChange,
    multiple,
    disabled: props.disabled ?? (() => false),
    collection,
    collapsible,
  }

  return (
    <AccordionContext value={ctx}>
      <div
        {...applySemanticAttrs({
          scope: "accordion",
          part: "root",
        })}
      >
        {props.children}
      </div>
    </AccordionContext>
  )
}