mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
169 lines
6.7 KiB
Plaintext
169 lines
6.7 KiB
Plaintext
---
|
|
// Port of preview/pages/modals.html.
|
|
// Every modal is rendered inline (`{% include "ui/modal.html" ... inline show %}`)
|
|
// via ModalInline (renders in place, unlike Modal.astro which drains to <body>).
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import ModalInline from '@shared/components/modals/ModalInline.astro';
|
|
import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro';
|
|
import LargeModalContent from '@shared/components/modals/LargeModalContent.astro';
|
|
import SmallModalContent from '@shared/components/modals/SmallModalContent.astro';
|
|
import FullWidthModalContent from '@shared/components/modals/FullWidthModalContent.astro';
|
|
import ScrollableModalContent from '@shared/components/modals/ScrollableModalContent.astro';
|
|
import ReportModalContent from '@shared/components/modals/ReportModalContent.astro';
|
|
import SuccessModalContent from '@shared/components/modals/SuccessModalContent.astro';
|
|
import DangerModalContent from '@shared/components/modals/DangerModalContent.astro';
|
|
import TeamModalContent from '@shared/components/modals/TeamModalContent.astro';
|
|
import SignatureModalContent from '@shared/components/modals/SignatureModalContent.astro';
|
|
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro';
|
|
import NewEventModalContent from '@shared/components/modals/NewEventModalContent.astro';
|
|
import NewTaskModalContent from '@shared/components/modals/NewTaskModalContent.astro';
|
|
import EditProfileModalContent from '@shared/components/modals/EditProfileModalContent.astro';
|
|
import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro';
|
|
import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro';
|
|
import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro';
|
|
|
|
const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0';
|
|
// add-task bakes `show` into the class string (no `show` flag) → aria-hidden="true".
|
|
const addTaskClass = 'position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0';
|
|
---
|
|
|
|
<DefaultLayout
|
|
title="Modals"
|
|
pageHeader="Modals"
|
|
pageMenu="base.modals"
|
|
pageLibs={['signature_pad', 'hugerte', 'litepicker']}
|
|
>
|
|
<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>
|
|
<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>
|
|
<ModalInline class={cardClass} modalId="simple" show>
|
|
<SimpleModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Large modal</h3>
|
|
<ModalInline class={cardClass} modalId="large" size="lg" show>
|
|
<LargeModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Small modal</h3>
|
|
<ModalInline class={cardClass} modalId="small" size="sm" show>
|
|
<SmallModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Full width modal</h3>
|
|
<ModalInline class={cardClass} modalId="full-width" size="full-width" show>
|
|
<FullWidthModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Scrollable modal</h3>
|
|
<ModalInline class={cardClass} modalId="scrollable" scrollable style="max-height: 30rem" show>
|
|
<ScrollableModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Modal with form</h3>
|
|
<ModalInline class={cardClass} modalId="report" size="lg" show>
|
|
<ReportModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Success modal</h3>
|
|
<ModalInline class={cardClass} modalId="success" size="sm" show>
|
|
<SuccessModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Danger modal</h3>
|
|
<ModalInline class={cardClass} modalId="danger" size="sm" show>
|
|
<DangerModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Modal with simple form</h3>
|
|
<ModalInline class={cardClass} modalId="team" show>
|
|
<TeamModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Modal with signature form</h3>
|
|
<ModalInline class={cardClass} modalId="signature" show>
|
|
<SignatureModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>New email modal</h3>
|
|
<ModalInline class={cardClass} modalId="new-email" show>
|
|
<NewEmailModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>New event modal</h3>
|
|
<ModalInline class={cardClass} modalId="new-event" show>
|
|
<NewEventModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>New task modal</h3>
|
|
<ModalInline class={cardClass} modalId="new-task" show>
|
|
<NewTaskModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Edit profile modal</h3>
|
|
<ModalInline class={cardClass} modalId="edit-profile" size="lg" show>
|
|
<EditProfileModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Confirm delete modal</h3>
|
|
<ModalInline class={cardClass} modalId="confirm-delete" size="sm" show>
|
|
<ConfirmDeleteModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Change password modal</h3>
|
|
<ModalInline class={cardClass} modalId="change-password" show>
|
|
<ChangePasswordModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h3>Add task modal</h3>
|
|
<ModalInline class={addTaskClass} modalId="add-task">
|
|
<AddTaskModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|