Skip to content

Commit 76d6b9b

Browse files
monabmonab
committed
(feat): bs5 offcanvas classes added
1 parent 578d055 commit 76d6b9b

File tree

4 files changed

+89
-0
lines changed

4 files changed

+89
-0
lines changed

‎src/scss/custom/_custom.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
@import 'editor'; // Editor scss
1111
@import 'modal'; // Modal scss
12+
@import 'offcanvas'; // Offcanvas scss
1213
@import 'footer'; // Footer scss
1314

1415
// Scss for demo purpose only

‎src/scss/custom/_offcanvas.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.bs-cheatsheet .bd-example .offcanvas {
2+
position: absolute;
3+
height: 200px;
4+
visibility: visible;
5+
transform: none;
6+
}

‎src/template-builder/contents/classes/offcanvas.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div class="col-sm-6 col-md-4 col-lg-3 category">
2+
<div class="card">
3+
<div class="card-header" data-bs-toggle="collapse" href="#categoryOffcanvas" role="button" aria-expanded="false" aria-controls="categoryPagination">
4+
<span class="item-filter-text">Offcanvas Start</span>
5+
</div>
6+
<div class="card-body collapse show" id="categoryOffcanvas">
7+
<ul class="list-items">
8+
<li class="list-item" data-id="offcanvas-start" data-clipboard-text="offcanvas-start">
9+
<div class="list-item-content">
10+
<a href="#offcanvas-start" class="list-item-text">
11+
<span class="item-filter-text">offcanvas-start(Default)</span>
12+
</a>
13+
<div class="code-snippet"><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStart">
14+
<div class="offcanvas-header">
15+
<h5 class="offcanvas-title" id="offcanvasStart">Offcanvas</h5>
16+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
17+
</div>
18+
<div class="offcanvas-body">
19+
<p>
20+
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
21+
</div>
22+
</div>
23+
</div></div></li>
24+
<li class="list-item" data-id="offcanvas-end" data-clipboard-text="offcanvas-end">
25+
<div class="list-item-content">
26+
<a href="#offcanvas-end" class="list-item-text">
27+
<span class="item-filter-text">offcanvas-end</span>
28+
</a>
29+
<div class="code-snippet"><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
30+
<div class="offcanvas-header">
31+
<h5 class="offcanvas-title" id="offcanvasEndLabel">Offcanvas End</h5>
32+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
33+
</div>
34+
<div class="offcanvas-body">
35+
<div>
36+
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
37+
</div>
38+
</div>
39+
</div></div>
40+
</li>
41+
<li class="list-item" data-id="offcanvas-top" data-clipboard-text="offcanvas-top">
42+
<div class="list-item-content">
43+
<a href="#offcanvas-top" class="list-item-text">
44+
<span class="item-filter-text">offcanvas-top</span>
45+
</a>
46+
<div class="code-snippet"><div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
47+
<div class="offcanvas-header">
48+
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas Top</h5>
49+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
50+
</div>
51+
<div class="offcanvas-body">
52+
<div>
53+
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
54+
</div>
55+
</div>
56+
</div></div>
57+
</li>
58+
<li class="list-item" data-id="offcanvas-bottom" data-clipboard-text="offcanvas-bottom">
59+
<div class="list-item-content">
60+
<a href="#offcanvas-bottom" class="list-item-text">
61+
<span class="item-filter-text">offcanvas-bottom</span>
62+
</a>
63+
<div class="code-snippet"><div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
64+
<div class="offcanvas-header">
65+
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas Bottom</h5>
66+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
67+
</div>
68+
<div class="offcanvas-body">
69+
<div>
70+
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
71+
</div>
72+
</div>
73+
</div></div>
74+
</li>
75+
</ul>
76+
</div>
77+
<a href="https://getbootstrap.com/docs/5.0/components/pagination/" target="_blank" class="item-link" data-bs-toggle="tooltip" data-bs-placement="top" title="See Official Documentation">
78+
<img src="assets/images/fonts/box-arrow-up-right.png" alt="External link">
79+
</a>
80+
</div>
81+
</div>

‎src/template-builder/pages/index.pug‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ block content
3636
include ../contents/classes/modal.html
3737
include ../contents/classes/navs-tabs-pills.html
3838
include ../contents/classes/navbar.html
39+
include ../contents/classes/offcanvas.html
3940
include ../contents/classes/pagination.html
4041
include ../contents/classes/popovers.html
4142
include ../contents/classes/progress.html

0 commit comments

Comments
 (0)