diff options
| author | kyletsang <6854874+kyletsang@users.noreply.github.com> | 2021-10-10 08:05:50 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-11-02 23:56:47 +0300 |
| commit | 889286cef1ea4f7a647c90870a13c95de9827fc2 (patch) | |
| tree | cb90f1a928ddd3a0853bc1019f075adcede1953f | |
| parent | 05f1b15ddad0decd04feb0cc50a9b52703067638 (diff) | |
Add top placement info to offcanvas docs
| -rw-r--r-- | site/content/docs/5.1/components/offcanvas.md | 3 |
1 files changed, 2 insertions, 1 deletions
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index b1dd9c601f..fd18fe5c98 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -8,7 +8,7 @@ toc: true ## How it works -Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. +Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins. - Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables. @@ -188,6 +188,7 @@ The offcanvas plugin utilizes a few classes and attributes to handle the heavy l - `.offcanvas.show` shows the content - `.offcanvas-start` hides the offcanvas on the left - `.offcanvas-end` hides the offcanvas on the right +- `.offcanvas-top` hides the offcanvas on the top - `.offcanvas-bottom` hides the offcanvas on the bottom 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. |