Django Lookbook

<div data-controller="modal" >

  
                <button class="btn btn-blue" data-action="click->modal#open:prevent">Open Large Modal</button>
              

  <dialog class="m-auto bg-transparent backdrop:backdrop-blur-xs backdrop:bg-black/50 rounded-lg max-w-lg max-h-screen w-full"
          data-modal-target="dialog" data-action="click->modal#backdropClose">

    <div class="p-6 bg-white dark:bg-gray-900 dark:text-gray-200">

      
        <button type="button" data-action="modal#close:prevent" class="absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none rounded-xs ring-offset-background focus:outline-hidden focus:ring-ring">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5">
  <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
        </button>
      

      
        
                <h2 class="mb-4 text-xl">Modal title</h2>
                <p class="mb-4">This is an example modal dialog box.</p>
              
        
          <div class="flex flex-wrap gap-2 justify-end items-center mt-4">
            
                <button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
                <button class="btn btn-blue" data-action="click->modal#close:prevent">Close</button>
              
          </div>
        
      

    </div>
  </dialog>

</div>

@register_form_class(ModalParamsForm)
def large_modal(
    self,
    modal_title="Modal title",
    modal_content="This is an example modal dialog box.",
    **kwargs,
):
    

    template = Template(
        """
        {% load viewcomponent_tags %}

        {% component 'modal' size='lg' as component %}
          {% call component.trigger %}
            <button class="btn btn-blue" data-action="click->modal#open:prevent">Open Large Modal</button>
          {% endcall %}

          {% call component.body %}
            <h2 class="mb-4 text-xl">{{ modal_title }}</h2>
            <p class="mb-4">{{ modal_content }}</p>
          {% endcall %}

          {% call component.actions %}
            <button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
            <button class="btn btn-blue" data-action="click->modal#close:prevent">Close</button>
          {% endcall %}
        {% endcomponent %}
        """,
    )

    return template.render(
        Context(
            {
                "modal_title": modal_title,
                "modal_content": modal_content,
            },
        ),
    )

Param	Description	Input
Modal Title	Modal title
Modal Content	Modal content	This is an example modal dialog box.

Previews

No matching results.