Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 09:24:24 +04:00
Code Issues Projects Releases Wiki Activity

Allow Offcanvas docs page to scroll properly (#2565)

Browse Source
This commit is contained in:
ethancrawford
2025-12-12 03:07:12 +08:00
committed by GitHub
parent 83ec6f8bcc
commit 94e1a95ffb
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/content/ui/components/offcanvas.md
View File

@@ -10,10 +10,11 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c
{% capture html -%}
<div
class="offcanvas offcanvas-start show"
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvas"
aria-labelledby="offcanvasLabel"
data-bs-scroll="true"
>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Tabler component or custom
@@ -29,11 +30,12 @@ The offcanvas component is used to display a cookies banner. It is a great way t
{% capture html -%}
<div
class="offcanvas offcanvas-bottom h-auto show"
class="offcanvas offcanvas-bottom h-auto"
tabindex="-1"
id="offcanvasBottom"
aria-modal="true"
role="dialog"
data-bs-scroll="true"
>
<div class="offcanvas-body">
<div class="container">
@@ -58,4 +60,12 @@ The offcanvas component is used to display a cookies banner. It is a great way t
</div>
</div>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
{% include "docs/example.html" html=html raw %}
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
new bootstrap.Offcanvas(el, { scroll: true }).show();
});
});
</script>