diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-03-16 19:35:03 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-16 19:35:03 +0300 |
commit | ddf72bc6124618e3f4b6a056503d4f51d49c928e (patch) | |
tree | f2b6993ddf4709660079f28416eff11db3a1913a /site | |
parent | 1e14a0e646d4b27d562f9c6527ff3b97278e5145 (diff) |
Accept data-bs-body option in the configuration object as well (#33248)
* Accept data-bs-body option in the configuration object as well
Tweak jqueryInterface, add some more tests
* Fix Markdown table formatting and tweak the wording on backdrop
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.0/components/offcanvas.md | 61 |
1 files changed, 27 insertions, 34 deletions
diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index 9eacfd6b40..347242bb93 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -117,16 +117,16 @@ Try the right and bottom examples out below. </div> {{< /example >}} -## Options +## Backdrop -By default, we disable scrolling on the `<body>` when an offcanvas is visible and use a gray backdrop. Use the `data-bs-body` attribute to enable `<body>` scrolling, or a combination of both options +Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop. {{< example >}} <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button> -<div class="offcanvas offcanvas-start" data-bs-body="scroll" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"> +<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> @@ -135,7 +135,7 @@ By default, we disable scrolling on the `<body>` when an offcanvas is visible an <p>Try scrolling the rest of the page to see this option in action.</p> </div> </div> -<div class="offcanvas offcanvas-start" data-bs-body="backdrop" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel"> +<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> @@ -144,7 +144,7 @@ By default, we disable scrolling on the `<body>` when an offcanvas is visible an <p>.....</p> </div> </div> -<div class="offcanvas offcanvas-start" data-bs-body="scroll,backdrop" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"> +<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> @@ -174,9 +174,6 @@ The offcanvas plugin utilizes a few classes and attributes to handle the heavy l - `.offcanvas-start` hides the offcanvas on the left - `.offcanvas-end` hides the offcanvas on the right - `.offcanvas-bottom` hides the offcanvas on the bottom -- `data-bs-body="scroll"` enables `<body>` scrolling when offcanvas is open -- `data-bs-body="backdrop"` disables scrolling and creates a backdrop over the `<body>` when offcanvas is open `(default)` -- `data-bs-body="backdrop,scroll"` combines both options to enable `<body>` scrolling and create a backdrop over the `<body>` when offcanvas is open Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. @@ -195,6 +192,18 @@ var offcanvasList = offcanvasElementList.map(function (offcanvasEl) { }) ``` +### Options + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. + +{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `backdrop` | boolean | `true` | Apply a backdrop on body 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 {{< callout danger >}} @@ -210,43 +219,27 @@ var myOffcanvas = document.getElementById('myOffcanvas') var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas) ``` +{{< bs-table "table" >}} | Method | Description | | --- | --- | | `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). | | `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).| | `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).| | `_getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element | +{{< /bs-table >}} ### Events Bootstrap's offcanvas class exposes a few events for hooking into offcanvas functionality. -<table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.offcanvas</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.offcanvas</td> - <td>This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.offcanvas</td> - <td>This event is fired immediately when the <code>hide</code> method has been called.</td> - </tr> - <tr> - <td>hidden.bs.offcanvas</td> - <td>This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. | +| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). | +| `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. | +| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). | +{{< /bs-table >}} ```js var myOffcanvas = document.getElementById('myOffcanvas') |