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 -%} {% capture html -%}
<div <div
class="offcanvas offcanvas-start show" class="offcanvas offcanvas-start"
tabindex="-1" tabindex="-1"
id="offcanvas" id="offcanvas"
aria-labelledby="offcanvasLabel" aria-labelledby="offcanvasLabel"
data-bs-scroll="true"
> >
<div class="offcanvas-body"> <div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Tabler component or custom 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 -%} {% capture html -%}
<div <div
class="offcanvas offcanvas-bottom h-auto show" class="offcanvas offcanvas-bottom h-auto"
tabindex="-1" tabindex="-1"
id="offcanvasBottom" id="offcanvasBottom"
aria-modal="true" aria-modal="true"
role="dialog" role="dialog"
data-bs-scroll="true"
> >
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="container"> <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>
</div> </div>
{%- endcapture %} {%- 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>