preview/pages/modals.astro - dev - githubmirror/tabler

preview/pages/modals.astro
163 строки7 KB
Bartosz-Do
Fix broken links, aria attributes, and demo data mismatches (#2831)
08 авг 2026, 01:02
08 авг 2026, 01:025c0a612
---
// 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', 'tom-select']}>
  <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>
            <a href="#modal-add-task" class="nav-link">Add task 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>