mirror of
https://github.com/tabler/tabler.git
synced 2026-10-15 10:46:23 +04:00
29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
---
|
|
// Offcanvas container (.offcanvas). Renders inline at the call site (unlike Modal, which drains to the end of body).
|
|
|
|
interface Props {
|
|
/** offcanvas-{direction}: start | end | top | bottom */
|
|
direction?: string
|
|
/** responsive variant offcanvas-{size} (lg | xl | xxl) — replaces the base .offcanvas class */
|
|
size?: string
|
|
/** offcanvas-narrow (20rem width) */
|
|
narrow?: boolean
|
|
show?: boolean
|
|
class?: string
|
|
/** defaults to "-1" when not provided */
|
|
tabindex?: string
|
|
/** defaults to "dialog" when not provided */
|
|
role?: astroHTML.JSX.AriaRole
|
|
/** remaining attributes (id, aria-*, data-bs-*, …) are forwarded to the element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { direction, size, narrow, show, class: className, tabindex, role, ...rest } = Astro.props
|
|
---
|
|
|
|
<!-- BEGIN OFFCANVAS -->
|
|
<div class:list={[size ? `offcanvas-${size}` : 'offcanvas', direction && `offcanvas-${direction}`, narrow && 'offcanvas-narrow', show && 'show', className]} tabindex={tabindex ?? '-1'} role={role ?? 'dialog'} {...rest}>
|
|
<slot />
|
|
</div>
|
|
<!-- END OFFCANVAS -->
|