ButtonMenu

El componente ButtonMenu proporciona un botón interactivo con un menú desplegable que puede personalizarse con iconos, clases CSS, y configurarse para mostrarse por defecto o estar deshabilitado. También tiene la capacidad de mostrar un indicador de carga.

Ejemplo

Importación

Para importar el componente ButtonMenu, se puede hacer desde fenextjs

import { ButtonMenu } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
loader	boolean	no	false	Indica si el componente está en estado de carga, mostrando un indicador de carga (spinner) y deshabilitando su funcionalidad.
disabled	boolean	no	false	Desactiva el botón del menú.
defaultActive	boolean	no	true	Determina si el menú está activo por defecto o no.
target	string	no	'fenext-btn-menu-checkbox'	ID objetivo del checkbox asociado al botón del menú.
className	string	no	''	Clase CSS para personalizar el contenedor del menú.
classNameIcon	string	no	''	Clase CSS para personalizar el icono del menú.
classNameIconBarClose	string	no	''	Clase CSS para personalizar la barra de cierre del icono.
classNameContent	string	no	''	Clase CSS para personalizar el contenido del menú desplegable.

Funcionalidad adicional

Este componente incluye un comportamiento reactivo que ajusta la visualización del menú en función del tamaño de la ventana del navegador.

Propiedad	Uso	Descripción
defaultActive	Determina si el menú se muestra activo por defecto.	El menú se mostrará activado si el ancho de la ventana es mayor a 575px al cargar la página.
loader	Muestra un indicador de carga en lugar del contenido del menú.	Cuando 'loader' está en 'true', el componente muestra un spinner en lugar del contenido del menú.

Storybook

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

Usos

Uso básico

<ButtonMenu>Contenido del menú</ButtonMenu>

Menú con estado de carga

<ButtonMenu loader={true} />

Menú deshabilitado

<ButtonMenu disabled={true} />

Menú con clases personalizadas

<ButtonMenu
  className="mi-menu"
  classNameIcon="mi-icono"
  classNameContent="mi-contenido"
>
  Contenido
</ButtonMenu>

Search Itemmenu