mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
67 lines
2.7 KiB
Plaintext
67 lines
2.7 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import { ucFirst as capitalize } from '@shared/lib/string-format'
|
|
import ButtonList from '@ui/ButtonList.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardHeader from '@ui/CardHeader.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import Offcanvas from '@ui/Offcanvas.astro'
|
|
import OffcanvasHeader from '@ui/OffcanvasHeader.astro'
|
|
import OffcanvasBody from '@ui/OffcanvasBody.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
|
|
const directions = ['start', 'end', 'top', 'bottom'] as const
|
|
const variants = [
|
|
{ id: 'offcanvas', title: 'Default', floating: false },
|
|
{ id: 'offcanvasFloating', title: 'Floating', floating: true },
|
|
]
|
|
---
|
|
|
|
<DefaultLayout title="Offcanvas" pageMenu="base.offcanvas" description="An offcanvas panel slides in from an edge of the screen for navigation or supplementary content.">
|
|
<DocsLink slot="page-header-actions" path="/ui/components/offcanvas" />
|
|
|
|
<div class="row row-cards">
|
|
{
|
|
variants.map((variant) => (
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{variant.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<ButtonList>
|
|
{directions.map((direction) => (
|
|
<a class="btn" data-bs-toggle="offcanvas" href={`#${variant.id}${capitalize(direction)}`} role="button" aria-controls={`${variant.id}${capitalize(direction)}`}>
|
|
Toggle {direction} offcanvas
|
|
</a>
|
|
))}
|
|
</ButtonList>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
{
|
|
variants.map((variant) =>
|
|
directions.map((direction) => (
|
|
<Offcanvas direction={direction} floating={variant.floating} tabindex="-1" id={`${variant.id}${capitalize(direction)}`} aria-labelledby={`${variant.id}${capitalize(direction)}Label`}>
|
|
<OffcanvasHeader title={`${capitalize(direction)} offcanvas`} titleId={`${variant.id}${capitalize(direction)}Label`}>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
|
|
</OffcanvasHeader>
|
|
<OffcanvasBody>
|
|
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!</div>
|
|
<div class="mt-3">
|
|
<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
|
|
Close offcanvas
|
|
</button>
|
|
</div>
|
|
</OffcanvasBody>
|
|
</Offcanvas>
|
|
)),
|
|
)
|
|
}
|
|
</DefaultLayout>
|