Drawer

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_basic" title="Project settings" trigger_label="Open basic"  %}
<p class="text-base">Review the details before continuing.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_form" title="Project settings" trigger_label="Open form"  %}
<form method="dialog" class="grid gap-4">{% include "wdj/components/input.html" with name="drawer_project" label="Project name" required=True only %}{% include "wdj/components/button.html" with label="Save" type="submit" variant="primary" only %}</form>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_description" title="Project settings" trigger_label="Open description" description="Manage your project settings." %}
<p class="text-base">Review the details before continuing.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_large" title="Project settings" trigger_label="Open large" width="sm:max-w-lg" %}
<p class="text-base">Review the details before continuing.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_scrolling_body" title="Project settings" trigger_label="Open scrolling body"  %}
<div class="grid gap-4"><p class="text-base">Resource details and configuration 0.</p><p class="text-base">Resource details and configuration 1.</p><p class="text-base">Resource details and configuration 2.</p><p class="text-base">Resource details and configuration 3.</p><p class="text-base">Resource details and configuration 4.</p><p class="text-base">Resource details and configuration 5.</p><p class="text-base">Resource details and configuration 6.</p><p class="text-base">Resource details and configuration 7.</p><p class="text-base">Resource details and configuration 8.</p><p class="text-base">Resource details and configuration 9.</p><p class="text-base">Resource details and configuration 10.</p><p class="text-base">Resource details and configuration 11.</p><p class="text-base">Resource details and configuration 12.</p><p class="text-base">Resource details and configuration 13.</p><p class="text-base">Resource details and configuration 14.</p><p class="text-base">Resource details and configuration 15.</p><p class="text-base">Resource details and configuration 16.</p><p class="text-base">Resource details and configuration 17.</p><p class="text-base">Resource details and configuration 18.</p><p class="text-base">Resource details and configuration 19.</p><p class="text-base">Resource details and configuration 20.</p><p class="text-base">Resource details and configuration 21.</p><p class="text-base">Resource details and configuration 22.</p><p class="text-base">Resource details and configuration 23.</p></div>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_left" title="Navigation" trigger_label="Open left drawer" side="left" %}
<p class="text-base">Navigation from the left edge.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_compact" title="Project" trigger_label="Open compact" width="sm:max-w-xs" %}
<p class="text-base">Panel content.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_wide" title="Project" trigger_label="Open wide" width="sm:max-w-xl" %}
<p class="text-base">Panel content.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_backdrop_controlled" title="Project" trigger_label="Open backdrop controlled" close_on_backdrop=False %}
<p class="text-base">Panel content.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_descriptive_panel" title="Project" trigger_label="Open descriptive panel" description="Update your project configuration." %}
<p class="text-base">Panel content.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_parent" title="Project" trigger_label="Open nested panels" %}
{% wdj_component "wdj/components/drawer.html" id="drawer_child" title="Details" trigger_label="Open child panel" side="left" %}
<p class="text-base">Review resource details.</p>
{% endwdj_component %}
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_actions" title="Profile" trigger_label="Edit profile" %}
<form method="dialog" class="grid gap-4">{% include "wdj/components/input.html" with name="drawer_display_name" label="Display name" only %}{% include "wdj/components/button.html" with label="Save profile" type="submit" variant="primary" only %}</form>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/drawer.html" id="drawer_navigation" title="Navigation" trigger_label="Open navigation" %}
<nav aria-label="Panel navigation" class="grid gap-3"><a href="/">Overview</a><a href="/components/">Components</a><a href="/resources/">Resources</a></nav>
{% endwdj_component %}

{% load wdj %}
<div class='flex flex-wrap gap-3'>
  {% wdj_component 'wdj/components/drawer.html' id='top-drawer' side='top' title='Top panel' trigger_label='Open top panel' %}<p>Settings can also open from the top edge.</p>{% endwdj_component %}
  {% wdj_component 'wdj/components/drawer.html' id='bottom-drawer' side='bottom' title='Bottom panel' trigger_label='Open bottom panel' %}<p>The content remains scrollable on small screens.</p>{% endwdj_component %}
</div>

{% load wdj %}
{% wdj_component 'wdj/components/drawer.html' id='pending-drawer' title='Review operation' trigger_label='Open protected panel' dismiss_disabled=True %}
  <p class='mb-3'>Escape, the backdrop and the close control remain disabled until the application finishes the operation.</p>
  <button type='button' x-data @click="$el.closest('dialog').removeAttribute('data-wdj-dismiss-disabled'); $el.closest('dialog').close()" class='h-9 rounded-lg bg-kumo-base px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint'>Complete demonstration</button>
{% endwdj_component %}