Modal

Los modales son informativos y pueden contener información crítica para el usuario. A veces requieren que el usuario realice una acción o implican múltiples tareas.

¿Cómo usar?

Modal básico

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e, reason) => toggleModal(reason)}
        onOk={() => toggleModal()}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  );
}

Modal con acciones

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e, reason) => toggleModal(reason)}
        onCancel={() => toggleModal()}
        onOk={() => alert('Hola')}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  );
}

Texto personalizado en los botones se acción

pages/index.tsx
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e, reason) => toggleModal(reason)}
        onCancel={() => toggleModal()}
        onOk={() => alert('Hola')}
        onCancelText="Secondary button"
        onOkText="Main button"
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  );
}

Prueba el componente

https://driver-scheduling-frontend.vercel.app/

Editor en vivo
function MyModal() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = (reason) => {
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      return;
    }
    setOpenModal(!openModal);
  };
  return (
    <>
      <Button variant="contained" onClick={() => setOpenModal(!openModal)}>
        Open Modal
      </Button>
      <AgaveModal
        title="Agave Modal Title"
        showModal={openModal}
        onClose={(e, reason) => toggleModal(reason)}
        onOk={() => console.log('hola')}
        onCancel={() => toggleModal()}
      >
        <Box>
          <Typography gutterBottom>This is a component example</Typography>
          <Typography variant="body1" gutterBottom>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem?
          </Typography>
        </Box>
      </AgaveModal>
    </>
  );
}
Resultado
Loading...

Propiedades

Propiedades

Nombre	Tipo	Default	Descripción
showModal	boolean	false	Si es true, el componente se mostrará.
title	string		El título principal en el modal.
children	node		El contenido en el modal.
onOk	func	{}	Callback disparado cuando el botón principal ha sido presionado.
onCancel	func	{}	Callback disparado cuando el botón secundario ha sido presionado.
onOkText	string	Confirmar	Etiqueta/texto del botón principal.
onCancelText	string	Cancelar	Etiqueta/texto del botón secundario.
dialogProps	object	{}	Visita la documentación del API de material-ui para ver las propiedades del componente Modal.
dialogTitleProps	object	{}	Visita la documentación del API de material-ui para ver las propiedades del componente DialogTitle.
dialogContentProps	object	{}	See la documentación del API de material-ui para ver las propiedades del componente DialogContent.
dialogActionsProps	object	{}	See la documentación del API de material-ui para ver las propiedades del componente DialogActions.