76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
+++
|
|
[taxonomies]
|
|
section = ["Components"]
|
|
+++
|
|
|
|
# Offcanvas
|
|
|
|
## Basic
|
|
|
|
The offcanvas component serves as a sidebar that is hidden out of view until is
|
|
toggled via an interactive element. The offcanvas is composed of the following
|
|
elements:
|
|
|
|
- `msp-offcanvas`: the main container.
|
|
- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more.
|
|
- `msp-offcanvas-content`: the container for the content.
|
|
- `msp-offcanvas-header`: top section of the content.
|
|
- `msp-offcanvas-body`: middle section of the content.
|
|
- `msp-offcanvas-footer`: bottom section of the content.
|
|
|
|
To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an
|
|
element and attach the `data-msp-target` attribute.
|
|
|
|
### Example:
|
|
|
|
```html
|
|
<body>
|
|
<aside id="main-offcanvas" class="msp-offcanvas">
|
|
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
|
|
|
|
<div class="msp-offcanvas-content">
|
|
<div class="msp-offcanvas-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<nav>
|
|
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
|
</nav>
|
|
<section>...</section>
|
|
</main>
|
|
</body>
|
|
```
|
|
|
|
## Responsive
|
|
|
|
It's possible to have the sidebar always visible and only hide the offcanvas
|
|
when the viewport is below the brakepoint. For this add the class
|
|
`msp-offcanvas-[breakpoint]`.
|
|
|
|
Note that the toggle and backdrop are disabled when the viewport is above the brakepoint.
|
|
|
|
### Example
|
|
|
|
```html
|
|
<body>
|
|
<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
|
|
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
|
|
|
|
<div class="msp-offcanvas-content">
|
|
<div class="msp-offcanvas-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<nav>
|
|
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
|
</nav>
|
|
<section>...</section>
|
|
</main>
|
|
</body>
|
|
```
|