mirror of
https://github.com/tabler/tabler.git
synced 2026-07-15 18:11:42 +04:00
feat: Add four new modals (new task, edit profile, confirm delete, change password) (#2529)
This commit is contained in:
Paweł Kuna
GitHub
+37
-12
@@ -4,7 +4,7 @@ page-header: Modals
|
||||
page-menu: base.modals
|
||||
layout: default
|
||||
permalink: modals.html
|
||||
page-libs: [signature_pad, hugerte]
|
||||
page-libs: [signature_pad, hugerte, litepicker]
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
@@ -23,53 +23,78 @@ page-libs: [signature_pad, hugerte]
|
||||
<a href="#modal-team" class="nav-link">Modal with simple form</a>
|
||||
<a href="#modal-signature" class="nav-link">Modal with signature form</a>
|
||||
<a href="#modal-new-email" class="nav-link">New email modal</a>
|
||||
<a href="#modal-new-event" class="nav-link">New event modal</a>
|
||||
<a href="#modal-new-task" class="nav-link">New task modal</a>
|
||||
<a href="#modal-edit-profile" class="nav-link">Edit profile modal</a>
|
||||
<a href="#modal-confirm-delete" class="nav-link">Confirm delete modal</a>
|
||||
<a href="#modal-change-password" class="nav-link">Change password modal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3>Simple modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="simple" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="simple" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Large modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="large" size="lg" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="large" size="lg" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Small modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="small" size="sm" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="small" size="sm" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Full width modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="full-width" size="full-width" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="full-width" size="full-width" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Scrollable modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with form</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="report" size="lg" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="report" size="lg" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Success modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="success" size="sm" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="success" size="sm" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Danger modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="danger" size="sm" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="danger" size="sm" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with simple form</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="team" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="team" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with signature form</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="signature" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="signature" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>New email modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-email" inline %}
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-email" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>New event modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-event" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>New task modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-task" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Edit profile modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="edit-profile" size="lg" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Confirm delete modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="confirm-delete" size="sm" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Change password modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="change-password" inline show %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user