Tuvaldan tashqari
Bir nechta sinflar va JavaScript plaginimiz yordamida loyihangizda navigatsiya, xarid qilish aravachalari va boshqalar uchun yashirin yon panellarni yarating.
U qanday ishlaydi
Offcanvas yon panel komponenti boʻlib, JavaScript orqali koʻrish oynasining chap, oʻng yoki pastki chetidan paydo boʻlishi mumkin. Tugmalar yoki langarlar siz almashtiradigan muayyan elementlarga biriktirilgan trigger sifatida ishlatiladi va dataatributlar bizning JavaScript-ni chaqirish uchun ishlatiladi.
- Offcanvas modallar bilan bir xil JavaScript kodlarini baham ko'radi. Kontseptual jihatdan ular juda o'xshash, ammo ular alohida plaginlardir.
- Xuddi shunday, offcanvas uslublari va o'lchamlari uchun ba'zi manba Sass o'zgaruvchilari modal o'zgaruvchilaridan meros qilib olinadi.
- Ko'rsatilganda, offcanvas birlamchi fonni o'z ichiga oladi, uni bosish orqali kanvasni yashirish mumkin.
- Modallarga o'xshab, bir vaqtning o'zida faqat bitta offcanvas ko'rsatilishi mumkin.
Oldindan qisqa ma'lumot berish! CSS animatsiyalarni qanday ishlashini hisobga olsak, siz marginyoki translateelementdan foydalana olmaysiz .offcanvas. Buning o'rniga, sinfni mustaqil o'rash elementi sifatida foydalaning.
prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang
.
Misollar
Offcanvas komponentlari
.showQuyida sukut bo'yicha ( on orqali) ko'rsatilgan offcanvas misoli keltirilgan .offcanvas. Offcanvas, o'chirish tugmasi va ba'zi bir boshlang'ich uchun ixtiyoriy tana sinfiga ega bo'lgan sarlavhani qo'llab-quvvatlashni o'z ichiga oladi padding. Iloji bo'lsa, rad etish amallari bilan offcanvas sarlavhalarini qo'shishni yoki ochiq-oydin rad etish amalini taqdim etishingizni tavsiya qilamiz.
Tuvaldan tashqari
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>Jonli demo
.showQuyidagi tugmalardan foydalanib, klass bilan elementdagi sinfni almashtiradigan offcanvas elementini JavaScript orqali ko'rsatish va yashirish uchun foydalaning .offcanvas.
.offcanvaskontentni yashiradi (standart).offcanvas.showmazmunini ko‘rsatadi
Siz atributli havoladan hrefyoki atributli tugmachadan foydalanishingiz mumkin data-bs-target. Ikkala holatda data-bs-toggle="offcanvas"ham talab qilinadi.
Tuvaldan tashqari
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>Joylashtirish
Offcanvas komponentlari uchun standart joylashuv mavjud emas, shuning uchun siz quyidagi modifikator sinflaridan birini qo'shishingiz kerak;
.offcanvas-startkanvasni ko'rish oynasining chap tomoniga joylashtiradi (yuqorida ko'rsatilgan).offcanvas-endoffcanvasni ko'rish oynasining o'ng tomoniga joylashtiradi.offcanvas-topoffcanvasni ko'rish oynasining yuqori qismiga joylashtiradi.offcanvas-bottomoffcanvasni ko'rish oynasining pastki qismiga joylashtiradi
Quyida yuqori, o'ng va pastki misollarni sinab ko'ring.
Tuvaldan tashqari tepa
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>Offcanvas to'g'ri
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>Tuvaldan tashqari pastki
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>Fon
<body>Tuvaldan tashqari rasm va uning foni ko'rinadigan bo'lsa , elementni aylantirish o'chirib qo'yiladi. O‘tkazishni almashtirish va fonni almashtirish uchun data-bs-scrollatributdan foydalaning .<body>data-bs-backdrop
O'tkazish bilan ranglangan
Ushbu parametrni amalda ko'rish uchun sahifaning qolgan qismini aylantirib ko'ring.
Orqa fon bilan ochiq kanvas
......
Orqa fonda aylantirish bilan
Ushbu parametrni amalda ko'rish uchun sahifaning qolgan qismini aylantirib ko'ring.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>Foydalanish imkoniyati
Offcanvas paneli kontseptual ravishda modal dialog aria-labelledby="..."bo'lganligi sababli, -ga - offcanvas sarlavhasiga havola - qo'shishni unutmang .offcanvas. E'tibor bering, siz qo'shishingiz shart emas, role="dialog"chunki biz uni allaqachon JavaScript orqali qo'shdik.
Sass
O'zgaruvchilar
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
Foydalanish
Offcanvas plagini og'ir yuklarni ko'tarish uchun bir nechta sinflar va atributlardan foydalanadi:
.offcanvasmazmunini yashiradi.offcanvas.showmazmunini ko‘rsatadi.offcanvas-startchapdagi tuvaldan tashqarini yashiradi.offcanvas-endo'ng tarafdagi kanvasni yashiradi.offcanvas-bottompastki qismidagi kanvasni yashiradi
data-bs-dismiss="offcanvas"JavaScript funksiyasini ishga tushiradigan atributli o'chirish tugmachasini qo'shing . <button>Barcha qurilmalarda to'g'ri harakat qilish uchun u bilan elementdan foydalanganingizga ishonch hosil qiling .
Ma'lumotlar atributlari orqali
Bir offcanvas elementning boshqaruvini avtomatik belgilash uchun elementga data-bs-toggle="offcanvas"va a data-bs-targetyoki qo'shing . hrefAtribut offcanvasni data-bs-targetqo'llash uchun CSS selektorini qabul qiladi. offcanvasSinfni offcanvas elementiga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing show.
JavaScript orqali
Qo'lda yoqish:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-kabi qoʻshing data-bs-backdrop="".
| Ism | Turi | Standart | Tavsif |
|---|---|---|---|
backdrop |
mantiqiy | true |
Offcanvas ochiq bo'lganda tanaga fon suring |
keyboard |
mantiqiy | true |
Escape tugmasi bosilganda, offcanvasni yopadi |
scroll |
mantiqiy | false |
Offcanvas ochiq bo'lganda tanani aylantirishga ruxsat bering |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .
Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .
Kontentingizni kanvasdan tashqari element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.
Siz konstruktor yordamida offcanvas misolini yaratishingiz mumkin, masalan:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
| Usul | Tavsif |
|---|---|
toggle |
Offcanvas elementini ko'rsatish yoki yashirishga o'zgartiradi. Offcanvas elementi haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni shown.bs.offcanvasyoki hidden.bs.offcanvashodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. |
show |
Offcanvas elementini ko'rsatadi. Offcanvas elementi haqiqatda ko'rsatilishidan oldin (ya'ni shown.bs.offcanvasvoqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. |
hide |
Offcanvas elementini yashiradi. Offcanvas elementi haqiqatda yashirilishidan oldin (ya'ni hidden.bs.offcanvasvoqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. |
getInstance |
DOM elementi bilan bog'langan offcanvas misolini olish imkonini beruvchi statik usul |
getOrCreateInstance |
DOM elementi bilan bog'langan offcanvas misolini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul |
Voqealar
Bootstrap-ning offcanvas klassi offcanvas funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
| Tadbir turi | Tavsif |
|---|---|
show.bs.offcanvas |
Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi. |
shown.bs.offcanvas |
Ushbu hodisa offcanvas elementi foydalanuvchiga ko'rinadigan qilib qo'yilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.offcanvas |
Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi. |
hidden.bs.offcanvas |
Ushbu hodisa offcanvas elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})