mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
30 lines
1.3 KiB
Plaintext
30 lines
1.3 KiB
Plaintext
---
|
|
// Offcanvas container (.offcanvas). Renders inline at the call site (unlike Modal, which drains to the end of body).
|
|
import type { Breakpoint } from '@shared/lib/tokens'
|
|
|
|
interface Props {
|
|
/** core/scss/bootstrap/_offcanvas.scss `.offcanvas-{direction}` modifier classes */
|
|
direction?: 'start' | 'end' | 'top' | 'bottom' | undefined
|
|
/** responsive variant offcanvas-{responsive} ($grid-breakpoints minus xs) — replaces the base .offcanvas class */
|
|
responsive?: Exclude<Breakpoint, 'xs'> | undefined
|
|
/** core/scss/ui/_offcanvas.scss `.offcanvas-floating` — keeps a gap between the panel and the viewport edges */
|
|
floating?: 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, responsive, floating, show, class: className, tabindex, role, ...rest } = Astro.props
|
|
---
|
|
|
|
<!-- BEGIN OFFCANVAS -->
|
|
<div class:list={[responsive ? `offcanvas-${responsive}` : 'offcanvas', direction && `offcanvas-${direction}`, floating && 'offcanvas-floating', show && 'show', className]} tabindex={tabindex ?? '-1'} role={role ?? 'dialog'} {...rest}>
|
|
<slot />
|
|
</div>
|
|
<!-- END OFFCANVAS -->
|