mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
38 lines
1.4 KiB
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 %} |