diff options
| author | Mark Otto <[email protected]> | 2021-04-04 11:11:33 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-04-04 11:11:33 -0700 |
| commit | 056ad3ad9506a118ca77e3947cffbcef9d46fcd0 (patch) | |
| tree | 33f7f0c05cad6c87c7bd567e69dbc43ac6b7d419 | |
| parent | 91a24e2b09b5595fbf4c07efbce562e19c76c559 (diff) | |
| download | bootstrap-056ad3ad9506a118ca77e3947cffbcef9d46fcd0.tar.xz bootstrap-056ad3ad9506a118ca77e3947cffbcef9d46fcd0.zip | |
Add offcanvas-top modifier (#33549)
| -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> |