Collapse

El componente Collapse es un componente que muestra un contenido colapsado y un header para interactuar con el contenido.

Ejemplo

Importacion

Para importar el componente Collapse, se puede hacer desde fenextjs o fenextjs-component

import {
  Collapse,
  CollapseProps,
} from "fenextjs/cjs/component/Collapse/Simple";

import {
  Collapse,
  CollapseProps,
} from "fenextjs-component/cjs/Collapse/Simple";

Parametros

Propiedad	Tipo	Requerido	Descripción
loader	boolean	no	Indica si el Collapse está actualmente en estado de carga.
disabled	boolean	no	Indica si el Collapse está deshabilitado o no.
defaultActive	boolean	no	Indica si el Collapse está activo por defecto para mostrar.
active	boolean	no	Indica si el Collapse está activo para mostrar.
name	string	no	El nombre para el Collapse.
status	"none" \| "error" \| "ok"	no	Estado del collapse. Puede ser "none", "error" u "ok".
type	"radio" \| "checkbox"	no	Tipo de collapse. Puede ser "radio" o "checkbox".
show	"checked" \| "focus"	no	Tipo de forma para mostrar el collapse. Puede ser "checked" o "focus".
header	ReactNode	sí	Encabezado del Collapse.
onChange	(value: boolean) => void	no	Función de cambio del Collapse.

Storybook

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

Usos

Uso básico del componente Collapse

<Collapse
  loader={false}
  disabled={false}
  defaultActive={false}
  active={true}
  name="exampleCollapse"
  status="ok"
  type="checkbox"
  show="focus"
  header={<HeaderComponent />}
  onChange={(value) =>
    console.log(`Collapse cambiado a ${value ? "activo" : "inactivo"}`)
  }
>
  Contenido del Collapse
</Collapse>

Multiple Cols