LayoutGridMenuLeft
El componente LayoutGridMenuLeft organiza el contenido en un diseño de cuadrícula, con un menú a la izquierda que puede mostrarse u ocultarse. Además, admite alertas, carga de página y otros elementos opcionales.
Ejemplo
Importación
Para importar el componente LayoutGridMenuLeft, se puede hacer desde fenextjs
import { LayoutGridMenuLeft } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| useAlertHook | boolean | no | true | Indica si se debe renderizar el componente de alerta (AlertHook). |
| alertHookProps | AlertHookProps | no | {} | Propiedades para configurar el AlertHook. |
| loader | boolean | no | false | Indica si la página está en estado de carga, mostrando un indicador de carga. |
| menuLeft | ReactNode | no | undefined | Contenido que se renderiza en el menú izquierdo del layout. |
| menuLeftActive | boolean | no | true | Indica si el menú izquierdo está activo. |
| menuLeftMovilActive | boolean | no | false | Indica si el menú izquierdo está activo en dispositivos móviles. |
| useHeaderButtonMenu | boolean | no | false | Permite mostrar un botón en el encabezado para alternar el menú. |
| usePageProgress | boolean | no | true | Habilita una barra de progreso de la página. |
| target | string | no | 'fenext-btn-menu-checkbox' | El objetivo del botón en el menú. |
| className | string | no | '' | Clase CSS para el componente principal. |
| classNameMenuLeft | string | no | '' | Clase CSS para el menú izquierdo. |
| classNameMenuLeftContent | string | no | '' | Clase CSS para el contenido del menú izquierdo. |
| classNameChildren | string | no | '' | Clase CSS para el contenedor de los hijos del componente. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Uso básico
<LayoutGridMenuLeft />- Con menú personalizado
<LayoutGridMenuLeft menuLeft={<CustomMenu />} />- Con estado de carga
<LayoutGridMenuLeft loader={true} />