diff options
| -rw-r--r-- | scss/_offcanvas.scss | 10 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/offcanvas.md | 17 |
2 files changed, 26 insertions, 1 deletions
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index aa6c156bd..5c11101f6 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -53,6 +53,16 @@ transform: translateX(100%); } +.offcanvas-top { + top: 0; + right: 0; + left: 0; + height: $offcanvas-vertical-height; + max-height: 100%; + border-bottom: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateY(-100%); +} + .offcanvas-bottom { right: 0; left: 0; diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index a2b5ed3fa..768e811bc 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> |