DropDown
El componente DropDown es un componente que muestra un seudo submenu.
Ejemplo
Importacion
Para importar el componente DropDown, se puede hacer desde fenextjs o fenextjs-component
import { DropDown, DropDownProps } from "fenextjs/cjs/component/DropDown";o
import { DropDown, DropDownProps } from "fenextjs-component/cjs/DropDown";Parametros
| Propiedad | Tipo | Requerido | Default | Descripción |
|---|---|---|---|---|
| loader | boolean | no | Indica si el DropDown está actualmente en estado de carga. | |
| disabled | boolean | no | Indica si el DropDown está deshabilitado o no. | |
| defaultActive | boolean | no | Indica si el DropDown está activo por defecto para mostrar. | |
| active | boolean | no | Indica si el DropDown está activo para mostrar. | |
| name | string | no | El nombre para el DropDown. | |
| 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 DropDown. | |
| onChange | (value: boolean) => void | no | Función de cambio del DropDown. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Uso básico del componente DropDown
<DropDown
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 DropDown
</DropDown>