Todos los componentes (204)

Grupo segmentado

Elección · SegmentedGroup · .amset-segmented

Qué es y cuándo usarlo

Botones pegados en una sola pieza para elegir una opción (o varias) que se aplica en el momento: la vista de una tabla, el periodo de un informe, un filtro rápido.

Cuándo usarlo

De dos a cinco opciones cortas que cambian lo que se ve al instante.
Con selection="single" (por defecto), una vez elegida una opción siempre queda una: volver a pulsarla no la suelta. Si hace falta «sin filtro», va como una opción más («Todas»).
Con selection="multiple", filtros que se suman y se quedan pulsados.
iconsOnly en barras de herramientas: el label de cada opción pasa a ser su nombre y el rótulo al pasar el ratón.

Cuándo no

En un formulario que se envía con un botón: RadioGroup.
Muchas opciones o textos largos: Select.
Acciones sueltas que no se quedan pulsadas: Button, o Toolbar.

Teclado: con una sola selección es un grupo de radio nativo: un solo Tab para todo el grupo, y las flechas mueven y eligen a la vez (al llegar al final dan la vuelta). Con multiple es una barra de botones que se quedan pulsados: las flechas mueven el foco (y dan la vuelta) y Espacio pulsa. Las opciones deshabilitadas no se eligen.

Accesibilidad: con una es un radiogroup; con varias, un toolbar de botones con aria-pressed. En los dos casos el label nombra el grupo, aunque no se vea; visibleLabel lo pone encima y el grupo se llama con él, en los dos modos. Con iconsOnly el icono es decorativo y el nombre de cada botón sale de su label. Con una sola selección y name, el valor viaja dentro de un formulario.

Movimiento: con una sola selección, el relleno de la elegida se desliza de una opción a otra; con varias, cada relleno aparece con un fundido en su sitio.

Si no cabe: la fila se desplaza en horizontal dentro de su marco, en vez de cortar las últimas opciones. Con el dedo, ninguna opción baja de 44 px.

Foco: doble y por dentro: el azul del foco y un filo del color de la superficie, que se ve también sobre la elegida (en claro, del mismo azul que el foco).

Aspecto fino: variables --amset-segmented-height, -padding, -font, -label, -icon, -radius, -background, -border, -divider, -selected y -selected-ink.

Cómo se ve

<SegmentedGroup
  label="Forma de envio"
  visibleLabel
  options={[
    { key: 'estandar', label: 'Estandar' },
    { key: 'urgente', label: 'Urgente' },
    { key: 'recogida', label: 'Recogida' },
  ]}
  value={envio}
  onChange={setEnvio}
/>
<SegmentedGroup
  label="Como ver los pedidos"
  visibleLabel
  size="sm"
  iconsOnly
  options={[
    { key: 'lista', label: 'Lista', icon: <ListIcon /> },
    { key: 'cuadricula', label: 'Cuadricula', icon: <LayoutGridIcon /> },
    { key: 'calendario', label: 'Calendario', icon: <CalendarIcon /> },
  ]}
  value={vista}
  onChange={setVista}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Nombre del grupo para quien no ve los botones. Obligatorio.
`options`obligatoria	`readonly SegmentedOption[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`fullWidth`	`boolean`	—
`iconsOnly`	`boolean`	Solo los iconos; la etiqueta pasa a ser el nombre accesible y el rotulo del raton.
`initialValue`	`string \| readonly string[]`	—
`onChange`	`((key: string) => void) \| ((keys: readonly string[]) => void)`	—
`orientation`	`"horizontal" \| "vertical"`	—
`selection`	`"multiple" \| "single"`	—
`size`	`"sm" \| "md" \| "lg"`	Alto de 30, 36 o 44 px, como los botones. Con el dedo, nada baja de 44 px.
`value`	`string \| readonly string[] \| null`	—
`visibleLabel`	`boolean`	Ensena la etiqueta del grupo encima, en vez de solo anunciarla.

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-segmented-height`	`var(--amset-height-control)`
`--amset-segmented-padding`	`var(--amset-space-4)`
`--amset-segmented-font`	`var(--amset-text-base)`
`--amset-segmented-label`	`var(--amset-text-sm)`
`--amset-segmented-icon`	`1rem`
`--amset-segmented-radius`	`var(--amset-radius)`
`--amset-segmented-background`	`var(--amset-surface)`
`--amset-segmented-border`	`var(--amset-border-bold)`
`--amset-segmented-divider`	`var(--amset-border)`
`--amset-segmented-selected`	`var(--amset-accent)`
`--amset-segmented-selected-ink`	`var(--amset-accent-ink)`

Cómo se cambia

.amset-segmented {
  --amset-segmented-height: ...;
  --amset-segmented-padding: ...;
}

En el banco de pruebas

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