ModalBase

El componente ModalBase proporciona una base flexible para modales con diferentes posiciones, tipos de cierre y opciones de visibilidad.

Para importar el componente ModalBase, se puede hacer desde fenextjs

import { ModalBase } from "fenextjs";

Parámetro	Tipo	Requerido	Default	Descripcion
active	boolean	no	false	Indica si el modal está activo.
activeName	boolean \| null	no	undefined	Indica si el nombre específico del modal está activo.
activeNameLast	boolean \| null	no	undefined	Indica si el último nombre activo del modal está activo.
childrenUseActiveForShowHidden	boolean	no	false	Determina si los elementos secundarios utilizan el estado activo para mostrarse u ocultarse.
disabledClose	boolean	no	false	Indica si el cierre del modal está deshabilitado.
useRender	boolean	no	true	Determina si el modal utiliza renderización condicional.
type	'top' \| 'left' \| 'right' \| 'bottom' \| 'center' \| 'full' \| 'layout-grid' \| 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'	no	'center'	Define el tipo de modal o la posición en la que se muestra.
typeClose	'out' \| 'inset' \| 'none'	no	'out'	Especifica el tipo de botón de cierre para el modal.
onClose	function	no	undefined	Función que se ejecuta al cerrar el modal.
name	string	no	undefined	Nombre identificador del modal.
nameLocalStorage	string	no	undefined	Nombre clave en localStorage para el modal.
closeComponent	ReactNode	no	<Close />	Componente personalizado de cierre para el modal.
className	string	no	''	Clase CSS para personalizar el contenedor del modal.
classNameBg	string	no	''	Clase CSS para personalizar el fondo del modal.
classNameClose	string	no	''	Clase CSS para personalizar el icono de cierre del modal.
classNameContent	string	no	''	Clase CSS para personalizar el contenido del modal.

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

<ModalBase active={true} />

<ModalBase active={true}>Contenido del modal</ModalBase>

<ModalBase active={true} disabledClose={true} />

<ModalBase active={true} type="top-right" />