mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
221 lines
10 KiB
Plaintext
221 lines
10 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 CaptureScript from '@shared/components/CaptureScript.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import ButtonList from '@ui/ButtonList.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'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
|
|
const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0'
|
|
---
|
|
|
|
<DefaultLayout title="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'vanilla-calendar-pro', 'tom-select']} description="Modals interrupt the page to ask for input, confirmation, or a focused action.">
|
|
<DocsLink slot="page-header-actions" path="/ui/components/modal" />
|
|
|
|
<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>
|
|
<a href="#modal-native" class="nav-link">Native dialog</a>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h2>Simple modal</h2>
|
|
<ModalInline class={cardClass} modalId="simple" show>
|
|
<SimpleModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Large modal</h2>
|
|
<ModalInline class={cardClass} modalId="large" size="lg" show>
|
|
<LargeModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Small modal</h2>
|
|
<ModalInline class={cardClass} modalId="small" size="sm" show>
|
|
<SmallModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Full width modal</h2>
|
|
<ModalInline class={cardClass} modalId="full-width" size="full-width" show>
|
|
<FullWidthModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Scrollable modal</h2>
|
|
<ModalInline class={cardClass} modalId="scrollable" scrollable style="max-height: 30rem" show>
|
|
<ScrollableModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Modal with form</h2>
|
|
<ModalInline class={cardClass} modalId="report" size="lg" show>
|
|
<ReportModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Success modal</h2>
|
|
<ModalInline class={cardClass} modalId="success" size="sm" show>
|
|
<SuccessModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Danger modal</h2>
|
|
<ModalInline class={cardClass} modalId="danger" size="sm" show>
|
|
<DangerModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Modal with simple form</h2>
|
|
<ModalInline class={cardClass} modalId="team" show>
|
|
<TeamModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Modal with signature form</h2>
|
|
<ModalInline class={cardClass} modalId="signature" show>
|
|
<SignatureModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>New email modal</h2>
|
|
<ModalInline class={cardClass} modalId="new-email" show>
|
|
<NewEmailModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>New event modal</h2>
|
|
<ModalInline class={cardClass} modalId="new-event" show>
|
|
<NewEventModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>New task modal</h2>
|
|
<ModalInline class={cardClass} modalId="new-task" show>
|
|
<NewTaskModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Edit profile modal</h2>
|
|
<ModalInline class={cardClass} modalId="edit-profile" size="lg" show>
|
|
<EditProfileModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Confirm delete modal</h2>
|
|
<ModalInline class={cardClass} modalId="confirm-delete" size="sm" show>
|
|
<ConfirmDeleteModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Change password modal</h2>
|
|
<ModalInline class={cardClass} modalId="change-password" show>
|
|
<ChangePasswordModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div>
|
|
<h2>Add task modal</h2>
|
|
<ModalInline class={cardClass} modalId="add-task" show>
|
|
<AddTaskModalContent />
|
|
</ModalInline>
|
|
</div>
|
|
<div id="modal-native">
|
|
<h2>Native dialog</h2>
|
|
<p class="text-secondary">
|
|
A native <code><dialog></code> opened with <code>showModal()</code>. The browser paints the backdrop and Tabler styles it to match the one used by modals, with
|
|
<code>.modal-blur</code> blurring the page behind it. Buttons inside <code><form method="dialog"></code> close the dialog without any script. The panel uses the card classes on a child element, because the modal classes read CSS variables set on <code>.modal</code>, and a <code>display</code> value
|
|
on the dialog itself would keep it visible when closed.
|
|
</p>
|
|
<ButtonList>
|
|
<Button element="button" color="primary" id="native-dialog-open" text="Open native dialog" />
|
|
<Button element="button" id="native-dialog-open-blur" text="Open with blur" />
|
|
</ButtonList>
|
|
<dialog id="native-dialog" class="p-0 border-0 bg-transparent" style="width: 28rem; max-width: calc(100% - 2rem)">
|
|
<form method="dialog" class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Native dialog</h3>
|
|
<div class="card-actions">
|
|
<button type="submit" class="btn-close" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The browser keeps the page behind this dialog inert, traps focus inside it and closes it on Esc.</p>
|
|
</div>
|
|
<div class="card-footer text-end">
|
|
<Button element="button" type="submit" color="primary" text="Close" />
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<CaptureScript>
|
|
<!-- BEGIN NATIVE DIALOG SCRIPT -->
|
|
<script is:inline>
|
|
// Only opening a native <dialog> needs a script. Closing is handled by the
|
|
// <form method="dialog"> buttons inside it and by the Esc key.
|
|
function initNativeDialog() {
|
|
const nativeDialog = document.getElementById('native-dialog')
|
|
|
|
const openNativeDialog = (blur) => {
|
|
nativeDialog.classList.toggle('modal-blur', blur)
|
|
nativeDialog.showModal()
|
|
}
|
|
|
|
document.getElementById('native-dialog-open').addEventListener('click', () => openNativeDialog(false))
|
|
document.getElementById('native-dialog-open-blur').addEventListener('click', () => openNativeDialog(true))
|
|
}
|
|
|
|
document.readyState !== 'loading' ? initNativeDialog() : document.addEventListener('DOMContentLoaded', initNativeDialog, { once: true })
|
|
</script>
|
|
<!-- END NATIVE DIALOG SCRIPT -->
|
|
</CaptureScript>
|
|
</DefaultLayout>
|