alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(website): add offcanvas documentation

Browse source
This commit is contained in:
Alexander Navarro 2024-12-27 15:54:51 -03:00
parent 8cbd097389
commit c0a20f8993
4 changed files with 82 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

72
packages/website/content/components/offcanvas.md
View file

@ -3,4 +3,74 @@
section = ["Components"]
+++
# offcanvas.md
# 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>
```

4
packages/website/sass/style.scss
View file

@ -3,6 +3,6 @@
@use "@mini-strap/components/accordion/accordion.scss";
@use "@mini-strap/components/offcanvas/style.scss";
html {
// background-color: red;
main {
padding: var(--msp-spacing-3);
}