Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Жыйыштыруу

Бир нече класстар жана JavaScript плагиндерибиз менен долбооруңуз боюнча мазмундун көрүнүү мүмкүнчүлүгүн которуштуруу.

Бул кантип иштейт

Жыйратуу JavaScript плагини мазмунду көрсөтүү жана жашыруу үчүн колдонулат. Баскычтар же анкерлер сиз которуштуруучу белгилүү бир элементтерге түшүрүлгөн триггерлер катары колдонулат. Элементти жыйыштыруу heightанын учурдагы маанисин жандандырат 0. paddingCSS анимацияларды кантип иштетээрин эске алып, сиз .collapseэлементте колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Мисал

Класстын өзгөртүүлөрү аркылуу башка элементти көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды басыңыз:

  • .collapseмазмунду жашырат
  • .collapsingөтүү учурунда колдонулат
  • .collapse.showмазмунду көрсөтөт

data-bs-targetНегизинен атрибуту бар баскычты колдонууну сунуштайбыз . Семантикалык көз караштан сунушталбаса да, hrefатрибуту (жана a role="button") менен шилтемени да колдонсоңуз болот. Эки учурда тең data-bs-toggle="collapse"талап кылынат.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
html
<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>

Горизонталдуу

Кыйратуу плагини да горизонталдуу кыйроону колдойт. Анын ордуна .collapse-horizontalөтүү үчүн модификатор классын кошуңуз жана дароо бала элементке a орнотуңуз . Өзүңүздүн ыңгайлаштырылган Sass жазууңуздан тартынбаңыз, саптык стилдерди колдонуңуз же кеңдиктин утилиталарын колдонуңуз .widthheightwidth

Сураныч, төмөндөгү мисалда min-heightбиздин документтерде ашыкча боёкторду болтурбоо үчүн топтому бар болсо да, бул ачык талап кылынбайт. Бир гана widthбала элементи талап кылынат.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
html
<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>

Бир нече максаттар

A <button>же өзүнүн же атрибутундагы <a>селектордун жардамы менен бир нече элементтерди көрсөтүп жана жашыра алат . Бир нече же бир элементти көрсөтүп жана жашыра алат, эгерде алар ар бири ага өзүнүн же атрибуту менен кайрылсаhrefdata-bs-target<button><a>hrefdata-bs-target

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

Жеткиликтүүлүк

aria-expandedБашкаруу элементине кошууну унутпаңыз . Бул атрибут башкарууга байланган жыйыла турган элементтин учурдагы абалын экрандагы окурмандарга жана ушуга окшогон жардамчы технологияларга ачык жеткирет. Эгерде жыйыла турган элемент демейки боюнча жабылса, башкаруу элементиндеги атрибуттун мааниси болушу керек aria-expanded="false". Эгерде сиз showкласстын жардамы менен жыйыла турган элементти демейки боюнча ачык кылып койгон болсоңуз, aria-expanded="true"анын ордуна башкарууга орнотуңуз. Плагин жыйыла турган элементтин ачылганына же жабылбаганына (JavaScript аркылуу же колдонуучу ошол эле жыйылган элементке байланган башка башкаруу элементин ишке киргизгендиктен) негизинде башкаруудагы бул атрибутту автоматтык түрдө которушат. Башкаруу элементинин HTML элементи баскыч болбосо (мисалы, <a>же <div>), атрибутrole="button"элементке кошуу керек.

Эгерде сиздин башкаруу элементиңиз бир жыйыла турган элементке багытталган болсо, башкача айтканда, атрибут селекторду data-bs-targetкөрсөтүп жатса, сиз жыйыла турган элементти камтыган башкаруу элементине атрибутту кошушуңуз керек . Заманбап экранды окугучтар жана ушуга окшогон жардамчы технологиялар бул атрибутту пайдалануучуларга жыйылган элементтин өзүнө түздөн-түз өтүү үчүн кошумча жарлыктар менен камсыз кылуу үчүн колдонушат.idaria-controlsid

Көңүл буруңуз, Bootstrap'тин учурдагы ишке ашырылышы ARIA Authoring Practices Guide аккордеон үлгүсүндө сүрөттөлгөн ар кандай кошумча клавиатура өз ара аракеттенүүлөрүн камтыбайт - сиз аларды ыңгайлаштырылган JavaScript менен өзүңүз камтышыңыз керек болот.

Sass

Өзгөрмөлөр

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

Класстар

Кыйратуу өтүү класстарын табууга болот, scss/_transitions.scssанткени алар бир нече компоненттерде бөлүшүлгөн (кыйрыш жана аккордеон).

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

Колдонуу

Кыйратуу плагини оор жүктөрдү көтөрүү үчүн бир нече класстарды колдонот:

  • .collapseмазмунун жашырат
  • .collapse.showмазмунун көрсөтөт
  • .collapsingөтүү башталганда кошулат жана ал аяктаганда алынып салынат

Бул класстарды тапса болот _transitions.scss.

Маалымат атрибуттары аркылуу

Бир же бир нече жыйыла турган элементтерди башкарууну автоматтык түрдө дайындоо үчүн жөн гана элементке data-bs-toggle="collapse"жана a кошуңуз . data-bs-targetАтрибут data-bs-targetкыйратууну колдонуу үчүн CSS селекторун кабыл алат. collapseКлассты жыйыла турган элементке кошууну унутпаңыз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз show.

Аккордеон сыяктуу топту башкарууну жыйылган аймакка кошуу үчүн, маалымат атрибутун кошуңуз data-bs-parent="#selector". Көбүрөөк маалымат алуу үчүн аккордеон баракчасына кайрылыңыз .

JavaScript аркылуу

Кол менен иштетүү:

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

Параметрлер

Опциялар берилиш атрибуттары же JavaScript аркылуу өтүшү мүмкүн болгондуктан, сиз дарегинде болгондой, параметр атын кошо data-bs-аласыз data-bs-animation="{value}". Опцияларды маалымат атрибуттары аркылуу өткөрүп жатканда варианттын аталышынын регистр түрүн “ camelCase ”ден “ kebab-case ”ге өзгөртүүнү унутпаңыз. Мисалы, data-bs-custom-class="beautifier"ордуна колдонуңуз data-bs-customClass="beautifier".

Bootstrap 5.2.0 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'жана data-bs-title="456"атрибуттары болгондо, акыркы titleмаани болот 456жана өзүнчө маалымат атрибуттары берилген маанилерди жокко чыгарат data-bs-config. Мындан тышкары, учурдагы маалымат атрибуттары сыяктуу JSON маанилерин жайгаштыра алат data-bs-delay='{"show":0,"hide":150}'.

аты Type Демейки Description
parent селектор, DOM элементи null Эгер ата-эне камсыз кылынса, анда бул жыйыла турган нерсе көрсөтүлгөндө, көрсөтүлгөн ата-эне астында бардык жыйыла турган элементтер жабылат. card(салттуу аккордеон жүрүм-турумуна окшош - бул класска көз каранды ). Атрибут максаттуу жыйыла турган жерге коюлушу керек.
toggle логикалык true Чакыруудагы жыйылган элементти которуштуруу.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталганда эле, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

Мазмунуңузду жыйма элемент катары иштетет. Кошумча варианттарды кабыл алат object.

Сиз конструктор менен кыйратуу инстанциясын түзө аласыз, мисалы:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})
Метод Description
dispose Элементтин кыйрашын жок кылат. (DOM элементинде сакталган маалыматтарды жок кылат)
getInstance DOM элементине байланышкан кыйратуу инстанциясын алууга мүмкүндүк берген статикалык ыкма, сиз аны төмөнкүдөй колдоно аласыз: bootstrap.Collapse.getInstance(element).
getOrCreateInstance DOM элементине байланышкан кыйратуу инстанциясын кайтаруучу же ал инициализацияланбаган учурда жаңысын түзүүчү статикалык ыкма. Сиз аны төмөнкүдөй колдоно аласыз: bootstrap.Collapse.getOrCreateInstance(element).
hide Жыйналма элементти жашырат. Жыйналма элемент чындыгында жашырылганга чейин (мисалы, hidden.bs.collapseокуя болгонго чейин) чалуучуга кайтып келет.
show Жыйналма элементти көрсөтөт. Жыйналма элемент иш жүзүндө көрсөтүлө электе (мисалы, shown.bs.collapseокуя болгонго чейин) чалуучуга кайтат.
toggle Жыйналма элементти көрсөтүүгө же жашырууга которот. Жыйналма элемент иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.collapseже hidden.bs.collapseокуя болгонго чейин) чалуучуга кайтып келет.

Окуялар

Bootstrap'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
hide.bs.collapse Бул окуя hideыкма чакырылганда дароо өчүрүлөт.
hidden.bs.collapse Коллапс элементи колдонуучудан жашырылганда, бул окуя өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
show.bs.collapse Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
shown.bs.collapse Бул окуя кыйратуу элементи колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})