Dropdown

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

PropiedadTipoRequeridoDefaultDescripción
loaderbooleannoIndica si el DropDown está actualmente en estado de carga.
disabledbooleannoIndica si el DropDown está deshabilitado o no.
defaultActivebooleannoIndica si el DropDown está activo por defecto para mostrar.
activebooleannoIndica si el DropDown está activo para mostrar.
namestringnoEl nombre para el DropDown.
type"radio" | "checkbox"noTipo de collapse. Puede ser "radio" o "checkbox".
show"checked" | "focus"noTipo de forma para mostrar el collapse. Puede ser "checked" o "focus".
headerReactNodeEncabezado del DropDown.
onChange(value: boolean) => voidnoFunció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>