Files
tabler/shared/components/modals/Modal.astro
T

51 lines
977 B
Plaintext

---
// Modal shell markup. Wrap with <CaptureModal> at the call site to emit at the
// end of <body> (see PageModals). For inline gallery demos use ModalInline.
interface Props {
modalId?: string;
size?: string;
top?: boolean;
scrollable?: boolean;
class?: string;
show?: boolean;
style?: string;
}
const {
modalId = 'simple',
size,
top,
scrollable,
class: className,
show,
style,
} = Astro.props;
const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ');
const dialogClass = [
'modal-dialog',
size && `modal-${size}`,
!top && 'modal-dialog-centered',
scrollable && 'modal-dialog-scrollable',
]
.filter(Boolean)
.join(' ');
---
<!-- BEGIN MODAL -->
<div
class={modalClass}
style={style}
id={`modal-${modalId}`}
tabindex="-1"
role="dialog"
aria-hidden={show ? 'false' : 'true'}
>
<div class={dialogClass} role="document">
<div class="modal-content">
<slot />
</div>
</div>
</div>
<!-- END MODAL -->