BS5 Offcanvas
Offcanvas
Offcanvas modal oynalarga o‘xshaydi (standart holatda yashirin bo‘lib, faollashtirilganda ko‘rsatiladi), faqat u ko‘pincha yon paneldagi navigatsiya menyusi sifatida ishlatiladi.
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Offcanvas yon panel qanday yaratiladi
Quyidagi misolda offcanvas yon panelni qanday yaratish ko‘rsatilgan:
Misol
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
O‘zingiz sinab ko‘ring »
Misol tahlili
.offcanvas klassi offcanvas yon panelni yaratadi.
.offcanvas-start klassi offcanvas’ni joylashtiradi va uning kengligini 400px qiladi. Boshqa joylashtirish klasslari uchun quyidagi misollarni ko‘ring.
.offcanvas-title klassi to‘g‘ri tashqi chekinishlar (margin) va qator balandligini (line-height) ta’minlaydi.
So‘ngra kontentingizni .offcanvas-body klassi ichiga joylashtiring.
Offcanvas yon panelni ochish uchun .offcanvas konteynerining id’siga (bizning misolimizda #demo) ishora qiluvchi <button> yoki <a> elementidan foydalanishingiz kerak.
Offcanvas yon panelni <a> elementi yordamida ochish uchun data-bs-target atributi o‘rniga href atributi orqali #demo ga ishora qilishingiz mumkin.
Offcanvas joylashuvi
Offcanvas’ni chapga, o‘ngga, yuqoriga yoki pastga joylashtirish uchun .offcanvas-start|end|top|bottom dan foydalaning:
O‘ng tomon misoli
<div class="offcanvas offcanvas-end" id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Yuqori tomon misoli
<div class="offcanvas offcanvas-top" id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Pastki tomon misoli
<div class="offcanvas offcanvas-bottom" id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Moslashuvchan offcanvas menyu
Shuningdek, .offcanvas-sm|md|lg|xl|xxl klasslari yordamida offcanvas menyuni turli ekran kengliklarida qachon yashirish yoki ko‘rsatishni boshqarishingiz mumkin:
To‘q rangli offcanvas menyu
To‘q rangli offcanvas menyu yaratish uchun .text-bg-dark klassidan foydalaning.
Maslahat: To‘q fon bilan chiroyli ko‘rinadigan oq yopish tugmasini yaratish uchun .btn-close ga .btn-close-white klassini ham qo‘shdik:
Misol
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
Heading
Some text lorem ipsum.
Some text lorem ipsum.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!