Modal

Componente de interfaz de usuario utilizado para mostrar información o contenido adicional de manera superpuesta en la página web actual. Los modales son ventanas emergentes que se utilizan para destacar información importante, realizar acciones adicionales o solicitar la interacción del usuario sin que este abandone la página principal.

Example

<Modal>
  <h2 slot='title' class='astroui-modal-title'>Modal title</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Usage

Para dar funcionalidad a los modales, se debe usar el atributo data-toggle en un elemento que desencadene el modal. El valor del atributo data-toggle debe ser el id del modal que se quiere mostrar.

<Button data-toggle='modal-example'>Example</Button>
<Modal id='modal-example'>
  <h2 slot='title' class='astroui-modal-title'>Modal title</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Sizes

Los modales suelen ofrecer diferentes tamaños para adaptarse a diversos contenidos y necesidades de diseño. A continuación, te menciono algunos tamaños comunes para modales:

A continuación, te muestro un ejemplo de cómo usar los diferentes tamaños de modales: 👇

xs: 20rem
sm: 24rem
md: 32rem
lg: 40rem
xl: 48rem
2xl: 56rem
3xl: 64rem
4xl: 72rem
5xl: 80rem
6xl: 88rem
7xl: 96rem
8xl: 104rem
9xl: 112rem
full: 100%

  <Button data-toggle='modal-xs'>Extra small</Button>
  <Modal id='modal-xs' size='xs'>
    <h2 slot='title' class='astroui-modal-title'>Modal extra small</h2>
    <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
    <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
    <Button slot='footer' type='button' variant='primary'>Save changes</Button>
  </Modal>

Initial open

Para iniciar el modal cuando carga la página, se debe usar la prop initialOpen en el modal que se quiere mostrar.

<Modal id='modal-example' initialOpen>
  <h2 slot='title' class='astroui-modal-title'>Modal example</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Placements

Los modales se pueden mostrar en diferentes posiciones. Por defecto, la posición es top-center y las posiciones disponibles son top-start, top-center, top-end, center-start, center, center-end, bottom-start, bottom-center y bottom-end. Para cambiar la posición, se debe usar la propiedad placement.

<Button data-toggle='modal-example-positions'>Buttom start</Button>
<Modal id='modal-example-positions' placement='bottom-start'>
  <h2 slot='title' class='astroui-modal-title'>Modal bottom start</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Static backdrop

Los modales se pueden mostrar con un fondo estático. Para cambiar el modo, se debe usar la propiedad staticBackdrop.

<Button data-toggle='modal-example-static'>Static backdrop</Button>
<Modal id='modal-example-static' staticBackdrop>
  <h2 slot='title' class='astroui-modal-title'>Modal static backdrop</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Este ejemplo es fundamental para si queremos personalizar el contenido del modal. En este caso, el modal no tiene un body, ni un header ni un footer. En su lugar, tiene un content que representa todo el contenido del modal.

Una sugerencia para aplicar estilos es el uso de Tailwind CSS.

<Modal>
  <div slot='content' class='custom-tailwind-class'>
    <h2 class='astroui-modal-title'>Modal title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
    <Button type='button' variant='secondary'>Close</Button>
    <Button type='button' variant='primary'>Save changes</Button>
  </div>
</Modal>

Custom content

Personalizando el modal con usando Tailwind CSS.

<Button data-toggle='custom-modal'>Open custom modal</Button>
<Modal id='custom-modal'>
  <div slot='content' class='flex flex-col gap-4'>
    <div class='w-full flex justify-between items-center p-4'>
      <h2 class='astroui-modal-title'>Custom modal</h2>
      <button class='flex-none' data-dismiss='modal'>
        <svg xmlns="http://www.w3.org/2000/svg" 
        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
      </button>
    </div>
    <div class='px-4'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
    </div>
    <div class='flex justify-end gap-2 w-full p-4'>
      <button type='button' data-dismiss='modal' class='px-4 h-10 rounded-md flex items-center justify-center border border-gray-300 text-black'>Close</button>
      <button type='button' class='px-4 h-10 rounded-md flex items-center justify-center bg-blue-700 text-white'>Save changes</button>
    </div>
  </div>
</Modal>

Scroll behavior

Los modales se pueden mostrar con un scroll interno o externo. Para cambiar el modo, se debe usar la propiedad scrollBehavior. Esto es útil cuando el contenido del modal es más largo que la altura del modal o cuando el modal se muestra dentro de un scroll.

Inside scroll

<Button data-toggle='modal-example-inside-scroll'>Inside scroll</Button>
<Modal scrollBehavior='inside' id='modal-example-inside-scroll'>
  <h2 slot='title' class='astroui-modal-title'>Modal inside scroll</h2>
  <div slot='body' class='h-64 overflow-y-auto'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  </div>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Outside scroll

<Button data-toggle='modal-example-outside-scroll'>Outside scroll</Button>
<Modal scrollBehavior='outside' id='modal-example-outside-scroll'>
  <h2 slot='title' class='astroui-modal-title'>Modal outside scroll</h2>
  <div slot='body' class='h-64 overflow-y-auto'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  </div>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Hide button close

<Button data-toggle='modal-example'>Example</Button>
<Modal showButtonClose={false} id='modal-example'>
  <h2 slot='title' class='astroui-modal-title'>Modal title</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

El modal por defecto contiene border para separar o delimitar el contenido. Para quitar los bordes, se debe usar la propiedad border={false}.

<Button data-toggle='modal-example'>Example</Button>
<Modal border={false} id='modal-example'>
  <h2 slot='title' class='astroui-modal-title'>Modal title</h2>
  <p slot='body'>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
  <Button slot='footer' type='button' data-dismiss='modal' variant='secondary'>Close</Button>
  <Button slot='footer' type='button' variant='primary'>Save changes</Button>
</Modal>

Previous Input Next Popover

Astro ui