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

Yiqilish

Bir nechta sinflar va JavaScript plaginlarimiz yordamida loyihangiz boʻylab kontentning koʻrinishini oʻzgartiring.

U qanday ishlaydi

Collapse JavaScript plagini kontentni ko'rsatish va yashirish uchun ishlatiladi. Tugmalar yoki langarlar siz almashtiradigan muayyan elementlarga moslashtirilgan trigger sifatida ishlatiladi. Elementni yig'ish heightjoriy qiymatidan jonlantiriladi 0. CSS animatsiyalarni qanday boshqarishini hisobga olsak, siz elementdan foydalana paddingolmaysiz .collapse. 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 .

Misol

Sinf o'zgarishlari orqali boshqa elementni ko'rsatish va yashirish uchun quyidagi tugmalarni bosing:

  • .collapsemazmunini yashiradi
  • .collapsingo'tish paytida qo'llaniladi
  • .collapse.showmazmunini ko‘rsatadi

Odatda, data-bs-targetatributli tugmani ishlatishni tavsiya qilamiz. Semantik nuqtai nazardan tavsiya etilmasa ham, hrefatribut (va a role="button") bilan havoladan ham foydalanishingiz mumkin. Ikkala holatda data-bs-toggle="collapse"ham talab qilinadi.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Gorizontal

Yiqilish plagini gorizontal siqishni ham qo'llab-quvvatlaydi. Uning o'rniga .collapse-horizontalo'tish uchun modifikator sinfini qo'shing va bevosita asosiy elementga a o'rnating . O'zingizning shaxsiy Sassingizni yozing, inline uslublaridan foydalaning yoki kenglik yordam dasturlarimizdan foydalaning .widthheightwidth

Shuni esda tutingki, quyidagi misolda min-heightbizning hujjatlarimizda haddan tashqari qayta bo'yashni oldini olish uchun to'plam mavjud bo'lsa-da, bu aniq talab qilinmaydi. Faqat widthon bola elementi talab qilinadi.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Bir nechta maqsadlar

A <button>yoki <a>bir nechta elementlarni o'z hrefyoki data-bs-targetatributidagi selektor bilan havola qilish orqali ko'rsatishi va yashirishi mumkin. Bir nechta <button>yoki <a>elementni ko'rsatishi va yashirishi mumkin, agar ularning har biri unga o'z atributi bilan hrefmurojaat data-bs-targetqilsa

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Foydalanish imkoniyati

aria-expandedBoshqaruv elementiga qo'shishni unutmang . Bu atribut boshqaruvga bogʻlangan yigʻiladigan elementning joriy holatini ekranni oʻqish moslamalariga va shunga oʻxshash yordamchi texnologiyalarga aniq etkazadi. Agar yig'iladigan element sukut bo'yicha yopilgan bo'lsa, boshqaruv elementidagi atribut qiymati ga ega bo'lishi kerak aria-expanded="false". Agar siz yig'iladigan elementni showsinfdan foydalanib, sukut bo'yicha ochiq qilib qo'ygan bo'lsangiz, aria-expanded="true"uning o'rniga boshqaruvni o'rnating. Plagin yig'iladigan element ochilgan yoki yopilmaganligiga (JavaScript orqali yoki foydalanuvchi o'sha yig'iladigan elementga bog'langan boshqa boshqaruv elementini ishga tushirgani uchun) avtomatik ravishda boshqaruv elementida ushbu atributni almashtiradi. Agar boshqaruv elementining HTML elementi tugma bo'lmasa (masalan, <a>yoki <div>), atributrole="button"elementga qo'shilishi kerak.

Agar sizning boshqaruv elementingiz bitta yig'iladigan elementga mo'ljallangan bo'lsa - ya'ni atribut selektorga data-bs-targetishora qilsa - siz yig'iladigan elementni o'z ichiga olgan boshqaruv elementiga atributni qo'shishingiz kerak . Zamonaviy ekran o'quvchilari va shunga o'xshash yordamchi texnologiyalar foydalanuvchilarga to'g'ridan-to'g'ri yig'iladigan elementga o'tish uchun qo'shimcha yorliqlar bilan ta'minlash uchun ushbu atributdan foydalanadi.idaria-controlsid

E'tibor bering, Bootstrap-ning joriy ilovasi WAI-ARIA Authoring Practices 1.1 akkordeon naqshida tasvirlangan turli xil ixtiyoriy klaviatura o'zaro ta'sirlarini qamrab olmaydi - ularni o'zingiz maxsus JavaScript-ga qo'shishingiz kerak bo'ladi.

Sass

O'zgaruvchilar

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Sinflar

Yig'ish o'tish sinflarini topish mumkin, scss/_transitions.scsschunki ular bir nechta komponentlar (yiqilish va akkordeon) bo'ylab taqsimlanadi.

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Foydalanish

Yiqilish plagini og'ir yuklarni ko'tarish uchun bir nechta sinflardan foydalanadi:

  • .collapsemazmunini yashiradi
  • .collapse.showmazmunini ko‘rsatadi
  • .collapsingo'tish boshlanganda qo'shiladi va tugashi bilan o'chiriladi

Ushbu sinflarni quyidagi manzilda topish mumkin _transitions.scss.

Ma'lumotlar atributlari orqali

Bir yoki bir nechta yig'iladigan elementlarning boshqaruvini avtomatik belgilash uchun elementga data-bs-toggle="collapse"va a qo'shing . data-bs-targetAtribut data-bs-targetsiqishni qo'llash uchun CSS selektorini qabul qiladi. collapseSinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing show.

Akkordeonga o'xshash guruh boshqaruvini yig'iladigan maydonga qo'shish uchun ma'lumotlar atributini qo'shing data-bs-parent="#selector". Qo'shimcha ma'lumot uchun akkordeon sahifasiga qarang .

JavaScript orqali

Qo'lda yoqish:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-kabi qoʻshing data-bs-parent="".

Ism Turi Standart Tavsif
parent selektor | jQuery obyekti | DOM elementi false Agar ota-ona ko'rsatilgan bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon xatti-harakatiga o'xshash - bu cardsinfga bog'liq). Atribut maqsadli yig'iladigan maydonga o'rnatilishi kerak.
toggle mantiqiy true Chaqiruvda yig'iladigan elementni almashtiradi

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 yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

Konstruktor yordamida siqilish namunasini yaratishingiz mumkin, masalan:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Usul Tavsif
toggle Yigʻiladigan elementni koʻrsatish yoki berkitishga almashtiradi. Yig'iladigan element haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapsehidden.bs.collapse
show Yigʻiladigan elementni koʻrsatadi. Yigʻiladigan element haqiqatda koʻrsatilgunga qadar (masalan, voqea sodir boʻlishidan oldin) qoʻngʻiroq qiluvchiga qaytadi .shown.bs.collapse
hide Yig'iladigan elementni yashiradi. Yig'ib olinadigan element haqiqatda yashirilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .hidden.bs.collapse
dispose Elementning qulashini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
getInstance DOM elementi bilan bog'langan siqilish misolini olish imkonini beruvchi statik usul, siz undan quyidagicha foydalanishingiz mumkin:bootstrap.Collapse.getInstance(element)
getOrCreateInstance DOM elementi bilan bog'langan siqilish namunasini qaytaradigan yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin:bootstrap.Collapse.getOrCreateInstance(element)

Voqealar

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

Tadbir turi Tavsif
show.bs.collapse Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
shown.bs.collapse Ushbu hodisa yig'ish elementi foydalanuvchiga ko'rinadigan bo'lsa, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.collapse Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi.
hidden.bs.collapse Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})