1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Files
tabler/preview/pages/offcanvas.html

38 lines
1.4 KiB
HTML

---
page-menu: base.offcanvas
title: Offcanvas
page-header: Offcanvas
layout: default
permalink: offcanvas.html
---
{% assign directions = 'start,end,top,bottom' | split: ',' %}
<div class="card">
<div class="card-body">
{% for direction in directions %}
<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ direction | capitalize }}" role="button" aria-controls="offcanvas{{ direction | capitalize }}">
Toggle {{ direction }} offcanvas
</a>
{% endfor %}
</div>
</div>
{% for direction in directions %}
<div class="offcanvas offcanvas-{{ direction }}" tabindex="-1" id="offcanvas{{ direction | capitalize }}" aria-labelledby="offcanvas{{ direction | capitalize }}Label">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ direction | capitalize }} offcanvas</h2>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
</div>
<div class="mt-3">
<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
Close offcanvas
</button>
</div>
</div>
</div>
{% endfor %}