Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Tuvaldan tashqari

Bir nechta sinflar va JavaScript plaginimiz yordamida loyihangizda navigatsiya, xarid qilish aravachalari va boshqalar uchun yashirin yon panellarni yarating.

Ushbu sahifada

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.

Ushbu komponentning animatsiya effekti 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
Offcanvas uchun kontent shu yerda. Bu yerda deyarli har qanday Bootstrap komponenti yoki maxsus elementlarni joylashtirishingiz mumkin. 
<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.

href bilan bog'lanish
Tuvaldan tashqari
Ba'zi matn to'ldiruvchi sifatida. Haqiqiy hayotda siz tanlagan elementlarga ega bo'lishingiz mumkin. Masalan, matn, rasmlar, ro'yxatlar va boshqalar. 
<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

......

O'tkazish bilan fon

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">Backdrop 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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

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

Oʻchirish

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.

Rad etish

Ishdan bo'shatishga quyida ko'rsatilgandek , offcanvas ichidagi tugmadagidata atribut yordamida erishish mumkin:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

yoki quyida ko'rsatilganidek , tuvaldan tashqaridagi tugmachada:data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Tuvaldan tashqari rasmni o'chirishning ikkala usuli ham qo'llab-quvvatlansa-da, tashqi tuvalni tashqaridan o'chirish WAI-ARIA modal dialog dizayni naqshiga mos kelmasligini yodda tuting . Buni o'zingizning xavf-xataringiz bilan qiling.

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...
})