Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
Check
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, yuqori 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.
html 
<div class="offcanvas offcanvas-start show" 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" 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.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Tanani aylantirish

<body>Tuvaldan tashqari rasm va uning foni ko'rinadigan bo'lsa , elementni aylantirish o'chirib qo'yiladi. O'tkazishni data-bs-scrollyoqish uchun atributdan foydalaning .<body>

Tanani aylantiruvchi kanvas

Ushbu parametrni amalda ko'rish uchun sahifaning qolgan qismini aylantirib ko'ring.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Badanni aylantirish va fon

<body>Ko'rinadigan fon bilan aylantirishni ham yoqishingiz mumkin .

O'tkazish bilan fon

Ushbu parametrni amalda ko'rish uchun sahifaning qolgan qismini aylantirib ko'ring.

html 
<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" 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" 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>

Statik fon

Fon statik holatga o'rnatilgan bo'lsa, uning tashqarisiga bosilganda offcanvas yopilmaydi.

Tuvaldan tashqari
Mendan tashqariga bossangiz yopilmaydi.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

To'q rangli tuval

5.2.0 versiyasida qo'shilgan

To'q rangli navbarlar kabi turli kontekstlarga yaxshiroq moslashtirish uchun yordam dasturlari yordamida tasvirdan tashqari rasmlarning ko'rinishini o'zgartiring. Bu erda biz to'q rangli tuval bilan to'g'ri uslublash uchun .text-bg-darkva .offcanvasga .btn-close-whiteqo'shamiz . .btn-closeAgar sizda ochiladigan menyular bo'lsa, ga qo'shishni ham o'ylab .dropdown-menu-darkko'ring .dropdown-menu.

Tuvaldan tashqari

Tuvaldan tashqari kontentni bu yerga joylashtiring.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Javobgar

5.2.0 versiyasida qo'shilgan

Responsive offcanvas sinflari ko'rish oynasidan tashqaridagi kontentni belgilangan to'xtash nuqtasidan va pastga yashiradi. Ushbu to'xtash nuqtasidan yuqoridagi tarkib odatdagidek harakat qiladi. Masalan, to'xtash nuqtasi .offcanvas-lgostidagi tarkibni yopiq kanvasda yashiradi lg, lekin to'xtash nuqtasi ustidagi tarkibni ko'rsatadi lg.

Ta'sirchan offcanvas o'tish-o'tishni ko'rsatish uchun brauzeringiz hajmini o'zgartiring.
Tuvaldan tashqari sezgir

Bu bir ichidagi tarkibdir .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Har bir to'xtash nuqtasi uchun javob beruvchi offcanvas sinflari mavjud.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas to'g'ri
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Tuvaldan tashqari pastki
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida offcanvas endi .offcanvasreal vaqt rejimida yaxshilangan sozlash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass o'zgaruvchilari

$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-topyuqoridagi 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, esda tutingki, tashqi rasmni tashqaridan olib tashlash ARIA Mualliflik Amaliyotlari Qoʻllanmasi dialog (modal) naqshiga mos kelmaydi . Buni o'zingizning xavf-xataringiz bilan qiling.

JavaScript orqali

Qo'lda yoqish:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Variantlar

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo‘lgan eksperimental zaxiralangan ma’lumotlar atributini qo‘llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Ism Turi Standart Tavsif
backdrop mantiqiy yoki satrstatic true Offcanvas ochiq bo'lganda tanaga fon suring. Shu bilan bir qatorda, staticbosilganda kanvasni yopmaydigan fon uchun belgilang.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Usul Tavsif
getInstance DOM elementi bilan bog'langan offcanvas misolini olish imkonini beruvchi statik usul.
getOrCreateInstance DOM elementi bilan bog'langan offcanvas misolini olish yoki ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul.
hide Offcanvas elementini yashiradi. Offcanvas elementi haqiqatda yashirilishidan oldin (ya'ni hidden.bs.offcanvasvoqea 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.
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.

Voqealar

Bootstrap-ning offcanvas klassi offcanvas funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir turi Tavsif
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).
hidePrevented.bs.offcanvas Bu hodisa tuvaldan tashqari tasvir ko'rsatilganda, uning fonida staticva tuvaldan tashqarida chertish amalga oshirilganda ishga tushiriladi. Escape tugmasi bosilganda va keyboardopsiya ga o'rnatilganda ham hodisa o'chiriladi false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})