Жыйрату

Бұл қалай жұмыс істейді

Тасымалдау JavaScript плагині мазмұнды көрсету және жасыру үшін пайдаланылады. Түймешіктер немесе якорьдер сіз ауыстыратын арнайы элементтермен салыстырылатын триггерлер ретінде пайдаланылады. Элементті жию heightоның ағымдағы мәнінен мәнін жандандырады 0. paddingCSS анимацияларды қалай өңдейтінін ескере отырып , .collapseэлементте пайдалана алмайсыз . Оның орнына классты тәуелсіз орау элементі ретінде пайдаланыңыз.

Мысал

Сынып өзгерістері арқылы басқа элементті көрсету және жасыру үшін төмендегі түймелерді басыңыз:

• .collapseмазмұнын жасырады
• .collapsingауысу кезінде қолданылады
• .collapse.showмазмұнын көрсетеді

data-bs-targetӘдетте, төлсипаты бар түймені пайдалануды ұсынамыз . Семантикалық тұрғыдан ұсынылмағанымен, hrefатрибутпен (және a role="button") сілтемені де пайдалануға болады. Екі жағдайда да data-bs-toggle="collapse"талап етіледі.

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

Бірнеше мақсат

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

<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төлсипат idселекторды меңзесе - жиналатын элементті aria-controlsқамтитын төлсипатты басқару элементіне қосу керек id. Заманауи экранды оқу құрылғылары және ұқсас көмекші технологиялар пайдаланушыларға жиналмалы элементтің өзіне тікелей өту үшін қосымша таңбашалар беру үшін осы атрибутты пайдаланады.

Bootstrap бағдарламасының ағымдағы іске асырылуы WAI-ARIA Authoring Practices 1.1 аккордеон үлгісінде сипатталған әртүрлі қосымша пернетақта өзара әрекеттесулерін қамтымайтынын ескеріңіз - сіз оларды реттелетін JavaScript көмегімен өзіңіз қосуыңыз керек.

Сасс

Айнымалылар

$transition-collapse:         height .35s ease;

Сабақтар

Тасымалдау өтпелі сыныптарын табуға болады, scss/_transitions.scssөйткені олар бірнеше құрамдас бөліктерде ортақ (коллапс және аккордеон).

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

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

Қолданылуы

Collapse плагині ауыр жүкті көтеру үшін бірнеше сыныптарды пайдаланады:

• .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 арқылы

Қолмен қосу:

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-bs-сияқты қосыңыз data-bs-parent="".

Әдістері

Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

Конструктормен тасалау данасын жасауға болады, мысалы:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Оқиғалар

Bootstrap құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})