Yiqilish

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.

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.

<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

<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

<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

Esda tutingki, Bootstrap-ning joriy ilovasi ARIA Mualliflik Amaliyotlari Qo'llanmasi 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:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

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 zahiradagi 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}'.

Usullari

Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

Konstruktor yordamida siqilish namunasini yaratishingiz mumkin, masalan:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Voqealar

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})