Modal component

Modal base

El Modal base se emplea con la directiva x-modal::modal y se activa con la directiva x-modal::trigger-button que solo requiere especificar el tag "for". Puedes indicar el padding y otras clases en la misma declaración del modal ya que no cuenta con padding automático.


Un modal x-modal::modal cuenta con los siguientes atributos-tags:

  • id: requerido
  • size: opcional {sm, md, lg, xl} default {md}
  • slide: opcional. Esta tag cambia el estilo del modal y lo transforma en un modal lateral.
  • static-backdrop: opcional. Esta propiedad evita que el usuario pueda cerrar el modal desde el fondo del mismo.


En el botón x-modal::trigger-button puedes especificar con el tag action {show, hide, toggle} la acción a realizar con respecto al modal. El default es 'toggle'.

Ejemplos:

  • Modal: modal clásico.

    ...
<x-modal::trigger-button for="modal-1" class="btn btn-elevated-primary inline-block">
    Abrir modal
</x-modal::trigger-button>
...
<x-modal::modal id="modal-1" size="md" class="text-center p-5">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur saepe praesentium aut laboriosam molestias architecto voluptate doloribus cupiditate? Officia nobis inventore dolorum, laudantium ad sed sit eum eveniet asperiores ipsam!
    </p>
    <x-modal::trigger-button for="modal-1" action="hide" class="btn btn-elevated-primary inline-block mt-5">
        Cerrar modal
    </x-modal::trigger-button>
</x-modal::modal>


  • Modal slide:

    ...
<x-modal::trigger-button for="modal-2" class="btn btn-elevated-primary inline-block">
    Abrir modal
</x-modal::trigger-button>
...
<x-modal::modal id="modal-2" slide class="text-center p-5">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur saepe praesentium aut laboriosam molestias architecto voluptate doloribus cupiditate? Officia nobis inventore dolorum, laudantium ad sed sit eum eveniet asperiores ipsam!
    </p>
    <x-modal::trigger-button for="modal-2" action="hide" class="btn btn-elevated-primary inline-block mt-5">
        Cerrar modal
    </x-modal::trigger-button>
</x-modal::modal>


  • Modal static-backdrop:

    ...
<x-modal::trigger-button for="modal-3" class="btn btn-elevated-primary inline-block">
    Abrir modal
</x-modal::trigger-button>
...
<x-modal::modal id="modal-3" static-backdrop class="text-center p-5">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur saepe praesentium aut laboriosam molestias architecto voluptate doloribus cupiditate? Officia nobis inventore dolorum, laudantium ad sed sit eum eveniet asperiores ipsam!
    </p>
    <x-modal::trigger-button for="modal-3" action="hide" class="btn btn-elevated-primary inline-block mt-5">
        Cerrar modal
    </x-modal::trigger-button>
</x-modal::modal>


Dialog Modal

El Dialog Modal es un componente que usa como base el Modal base. Cuenta con padding automático y evidentemente también requiere de un 'id'.


Este modal cuenta con las mismas propiedades de un Modal base además de los siguientes:

  • close-button: opcional. Agrega un botón de cierre en el modal.


Los slot disponibles para este modal son:

  • title opcional
  • settings opcional
  • body requerido
  • footer opcional


Ejemplos:

  • Dialog Modal:

    ...
<x-modal::trigger-button for="dialog-modal-1" class="btn btn-elevated-primary inline-block">
    Abrir modal
</x-modal::trigger-button>
...
<x-modal::dialog-modal id="dialog-modal-1" size="md" static-backdrop close-button>
    <x-slot name="title" class="text-primary">
        Dialog Modal
    </x-slot>

    <x-slot name="body">
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, magnam laboriosam ab quos error similique officiis assumenda corrupti accusantium dignissimos fuga minus tempora reprehenderit nam ipsam distinctio voluptate quo pariatur.
        </p>
    </x-slot>

    <x-slot name="footer">
        <button data-tw-dismiss="modal" class="btn btn-elevated-secondary inline-block mr-2">
            Cancelar
        </button>
        <x-modal::trigger-button for="dialog-modal-1" action="hide" class="btn btn-primary inline-block">
            Guardar
        </x-modal::trigger-button>
    </x-slot>
</x-modal::dialog-modal>


  • Dialog Modal slide:

    ...
<x-modal::trigger-button for="dialog-modal-2" class="btn btn-elevated-primary inline-block">
    Abrir modal
</x-modal::trigger-button>
...
<x-modal::dialog-modal id="dialog-modal-2" size="md" slide static-backdrop close-button>
    <x-slot name="title" class="text-primary">
        Dialog Modal
    </x-slot>
    <x-slot name="settings">
        <button class="btn btn-elevated-secondary"><i class="fa fa-ellipsis-v"></i></button>
    </x-slot>

    <x-slot name="body">
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, magnam laboriosam ab quos error similique officiis assumenda corrupti accusantium dignissimos fuga minus tempora reprehenderit nam ipsam distinctio voluptate quo pariatur.
        </p>
    </x-slot>

    <x-slot name="footer">
        <button data-tw-dismiss="modal" class="btn btn-elevated-secondary inline-block mr-2">
            Cancelar
        </button>
        <x-modal::trigger-button for="dialog-modal-2" action="hide" class="btn btn-elevated-primary inline-block">
            Guardar
        </x-modal::trigger-button>
    </x-slot>
</x-modal::dialog-modal>


{warning.fa-warning} Procura que el modal no se encuentre dentro de algún grid o se mostrará mal.