LayoutGridMenuTop
El componente LayoutGridMenuTop es un diseño de cuadrícula que incluye un menú superior y permite gestionar una barra de progreso de página, mostrar alertas personalizadas y un indicador de carga.
Ejemplo
Importación
Para importar el componente LayoutGridMenuTop, se puede hacer desde fenextjs
import { LayoutGridMenuTop } 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 el componente AlertHook. |
| loader | boolean | no | false | Indica si la página está en estado de carga, mostrando un indicador de carga. |
| menuTop | ReactNode | no | undefined | Elemento del menú superior dentro del layout. |
| usePageProgress | boolean | no | true | Indica si se debe mostrar la barra de progreso de página. |
| className | string | no | '' | Clase CSS personalizada para el contenedor del layout. |
| classNameLoader | string | no | '' | Clase CSS personalizada para el indicador de carga. |
| classNameChildren | string | no | '' | Clase CSS personalizada para el contenido de los hijos. |
| classNameMenuTop | string | no | '' | Clase CSS personalizada para el menú superior. |
Funcionalidad de AlertHook
Si 'useAlertHook' está habilitado, el componente de alerta (AlertHook) se renderiza con las propiedades proporcionadas en 'alertHookProps'.
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Básico
<LayoutGridMenuTop />- Con menú superior
<LayoutGridMenuTop menuTop={<div>Menú</div>} />- Con barra de progreso deshabilitada
<LayoutGridMenuTop usePageProgress={false} />- Con alertas personalizadas
<LayoutGridMenuTop useAlertHook={true} alertHookProps={{ message: "Alerta" }} />