wiki-Segmented

Ver en Git

---

Segmented

El componente Segmented permite crear una interfaz de selección segmentada, ideal para elegir entre múltiples opciones. Es altamente personalizable y puede ser utilizado en diferentes contextos.

Referencia de la API

Propiedad	Tipo	Descripción
className	string (opcional)	Clase CSS adicional para personalizar el estilo del contenedor principal.
title	string | ReactNode (opcional)	Título o contenido a mostrar sobre las opciones segmentadas.
block	boolean (opcional)	Indica si el componente debe ocupar el ancho completo del contenedor.
disabled	boolean (opcional)	Deshabilita la interacción con el componente cuando es true. Por defecto, es false.
value	string | number (opcional)	Valor seleccionado actualmente.
onChange	(selected: value) => void (opcional)	Función que se ejecuta cuando se selecciona una opción. Recibe el valor seleccionado como argumento.
options	SegmentedOptionProps[] (opcional)	Lista de opciones disponibles para seleccionar. Cada opción incluye value (identificador único) y label (texto a mostrar).

SegmentedOptionProps

Cada opción debe tener la siguiente estructura:

Propiedad	Tipo	Descripción
value	string | number	Valor único que identifica la opción.
label	string	Texto que se mostrará en la opción.

Ejemplo de uso

import { Segmented } from '@auravant/ui-kit';

const options = [
 { value: 'option1', label: 'Opción 1' },
 { value: 'option2', label: 'Opción 2' },
 { value: 'option3', label: 'Opción 3' },
];

const handleSegmentedChange = (selected: string | number) => {
 console.log('Opción seleccionada:', selected);
};

<Segmented
 title="Seleccione una opción"
 options={options}
 value="option1"
 onChange={handleSegmentedChange}
 className="custom-segmented"
/>;