diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md | 50 |
1 files changed, 24 insertions, 26 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md index c4290adf2..39a5fb826 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md @@ -79,6 +79,22 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ </div> {{< /example >}} +### Dark offcanvas + +Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. + +{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <p>Place offcanvas content here.</p> + </div> +</div> +{{< /example >}} + ### Body scrolling Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling. @@ -137,27 +153,9 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi </div> {{< /example >}} -## Dark offcanvas - -{{< added-in "5.2.0" >}} - -Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. - -{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} -<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel"> - <div class="offcanvas-header"> - <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5> - <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button> - </div> - <div class="offcanvas-body"> - <p>Place offcanvas content here.</p> - </div> -</div> -{{< /example >}} - ## Responsive -{{< added-in "5.2.0" >}} +<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small> Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. @@ -247,7 +245,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l ### Variables -{{< added-in "5.2.0" >}} +<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small> As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. @@ -303,8 +301,8 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap | Name | Type | Default | Description | | --- | --- | --- | --- | | `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. | -| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. | -| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. | +| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed | +| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open | {{< /bs-table >}} ### Methods @@ -324,10 +322,10 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas') {{< bs-table "table" >}} | Method | Description | | --- | --- | -| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. | -| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. | -| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). | -| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs). | +| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element | +| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized | +| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).| +| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).| | `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). | {{< /bs-table >}} |