diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-04-04 21:11:33 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-04 21:11:33 +0300 |
| commit | 056ad3ad9506a118ca77e3947cffbcef9d46fcd0 (patch) | |
| tree | 33f7f0c05cad6c87c7bd567e69dbc43ac6b7d419 /site | |
| parent | 91a24e2b09b5595fbf4c07efbce562e19c76c559 (diff) | |
Add offcanvas-top modifier (#33549)
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.0/components/offcanvas.md | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index a2b5ed3fa5..768e811bce 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -85,9 +85,24 @@ There's no default placement for offcanvas components, so you must add one of th - `.offcanvas-start` places offcanvas on the left of the viewport (shown above) - `.offcanvas-end` places offcanvas on the right of the viewport +- `.offcanvas-top` places offcanvas on the top of the viewport - `.offcanvas-bottom` places offcanvas on the bottom of the viewport -Try the right and bottom examples out below. +Try the top, right, and bottom examples out below. + +{{< example >}} +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button> + +<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"> + <div class="offcanvas-header"> + <h5 id="offcanvasTopLabel">Offcanvas top</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + ... + </div> +</div> +{{< /example >}} {{< example >}} <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button> |