diff options
| author | GeoSot <[email protected]> | 2021-03-23 08:22:59 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-03-23 08:22:59 +0200 |
| commit | 1c02ef4f971afe5df75d4e1889435f3edd9f2bbd (patch) | |
| tree | bb36fd300edd2b90e435f53b0b13e5fd8f29df3e /site | |
| parent | d9da43f3cc9daaa6050685687416f3abd3ee25eb (diff) | |
| download | bootstrap-1c02ef4f971afe5df75d4e1889435f3edd9f2bbd.tar.xz bootstrap-1c02ef4f971afe5df75d4e1889435f3edd9f2bbd.zip | |
Allow offcanvas to be initialized in open state (#33382)
* Update docs to use new .show behavior and clarify some copy for first example
Co-authored-by: Mark Otto <[email protected]>
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 3 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/offcanvas.md | 6 |
2 files changed, 3 insertions, 6 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 91b5bbfd3..534f2307d 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -206,10 +206,7 @@ .offcanvas { position: static; - display: block; height: 200px; - visibility: visible; - transform: translateX(0); } } diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index 347242bb9..0e4aa1aa0 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -25,10 +25,10 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr ### Offcanvas components -Below is a _static_ offcanvas example (meaning its `position`, `display`, and `visibility` have been overridden). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. +Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. -{{< example class="bd-example-offcanvas p-0 bg-light" >}} -<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> +{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> |