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";
o
import {
Collapse,
CollapseProps,
} from "fenextjs-component/cjs/Collapse/Simple";
Parametros
Propiedad | Tipo | Requerido | Default | 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>