mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
78 lines
3.5 KiB
HTML
78 lines
3.5 KiB
HTML
---
|
|
title: Modals
|
|
page-header: Modals
|
|
page-menu: base.modals
|
|
layout: default
|
|
permalink: modals.html
|
|
page-libs: [signature_pad, hugerte]
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row g-5">
|
|
<div class="d-none d-md-block col-3">
|
|
<div class="nav nav-vertical sticky-top pt-4">
|
|
<a href="#modal-simple" class="nav-link">Simple modal</a>
|
|
<a href="#modal-large" class="nav-link">Large modal</a>
|
|
<a href="#modal-small" class="nav-link">Small modal</a>
|
|
<a href="#modal-full-width" class="nav-link">Full width modal</a>
|
|
<a href="#modal-scrollable" class="nav-link">Scrollable modal</a>
|
|
<a href="#modal-report" class="nav-link">Modal with form</a>
|
|
<a href="#modal-success" class="nav-link">Success modal</a>
|
|
<a href="#modal-danger" class="nav-link">Danger modal</a>
|
|
<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>
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</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 %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |