SwichViewList

El componente SwichViewList permite al usuario alternar entre diferentes vistas o ítems mediante una lista de opciones visuales, cada una identificada por un ícono y un identificador único.

Ejemplo

Importación

Para importar el componente SwichViewList, se puede hacer desde fenextjs

import { SwichViewList } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
className	string	no	""	Clase CSS para el contenedor del componente.
defaultValue	T	no	undefined	Valor predeterminado de la opción seleccionada.
onChange	(e?: T) => void	no	undefined	Función de cambio que se ejecuta al seleccionar una nueva opción.
list	{ id: T; icon: ReactNode; }[]	no	[]	Lista de ítems con íconos y identificadores únicos para cada opción.
name	string	no	"fenext-swich-view"	Nombre del grupo de opciones, útil para identificación en formularios.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Ejemplo básico

<SwichViewList
  list={[
    { id: "1", icon: <Icon1 /> },
    { id: "2", icon: <Icon2 /> },
  ]}
/>

Con valor predeterminado y función de cambio

<SwichViewList
  defaultValue="1"
  onChange={(e) => console.log("Seleccionado:", e)}
  list={[
    { id: "1", icon: <Icon1 /> },
    { id: "2", icon: <Icon2 /> },
  ]}
/>

Uso en un formulario

<SwichViewList
  name="viewSwitch"
  list={[
    { id: "grid", icon: <GridIcon /> },
    { id: "list", icon: <ListIcon /> },
  ]}
/>

Weekly Swichviewselect