mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
163 lines
7.2 KiB
Plaintext
163 lines
7.2 KiB
Plaintext
---
|
|
// Every modal is rendered inline via ModalInline (in place, unlike Modal.astro
|
|
// which drains to <body>).
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.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'
|
|
---
|
|
|
|
<DefaultLayout title="Modals" pageHeader="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'litepicker']}>
|
|
<Card>
|
|
<CardBody>
|
|
<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={cardClass} modalId="add-task" show>
|
|
<AddTaskModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</DefaultLayout>
|