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 height
joriy qiymatidan jonlantiriladi 0
. CSS animatsiyalarni qanday boshqarishini hisobga olsak, siz elementdan foydalana padding
olmaysiz .collapse
. Buning o'rniga, sinfni mustaqil o'rash elementi sifatida foydalaning.
prefers-reduced-motion
media 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:
.collapse
mazmunini yashiradi.collapsing
o'tish paytida qo'llaniladi.collapse.show
mazmunini ko‘rsatadi
Odatda, data-bs-target
atributli tugmani ishlatishni tavsiya qilamiz. Semantik nuqtai nazardan tavsiya etilmasa ham, href
atribut (va a role="button"
) bilan havoladan ham foydalanishingiz mumkin. Ikkala holatda data-bs-toggle="collapse"
ham talab qilinadi.
<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-horizontal
o'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 .width
height
width
min-height
bizning hujjatlarimizda haddan tashqari qayta bo'yashni oldini olish uchun to'plam mavjud bo'lsa-da, bu aniq talab qilinmaydi.
Faqat width
on bola elementi talab qilinadi.
<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 href
yoki data-bs-target
atributidagi 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 href
murojaat data-bs-target
qilsa
Birinchi elementni almashtirish
<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-expanded
Boshqaruv 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 show
sinfdan 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-target
ishora 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.id
aria-controls
id
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.scss
chunki 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:
.collapse
mazmunini yashiradi.collapse.show
mazmunini ko‘rsatadi.collapsing
o'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-target
Atribut data-bs-target
siqishni qo'llash uchun CSS selektorini qabul qiladi. collapse
Sinfni 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 card sinfga 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.collapse hidden.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 show misol 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 hide usul 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...
})