Колапс

Како то ради

ЈаваСцрипт додатак за колапс се користи за приказивање и сакривање садржаја. Дугмад или сидра се користе као окидачи који су мапирани на одређене елементе које пребацујете. Сажимањем елемента ће се анимирати heightса његове тренутне вредности на 0. С обзиром на то како ЦСС рукује анимацијама, не можете користити paddingна .collapseелементу. Уместо тога, користите класу као независни елемент омотача.

Пример

Кликните на дугмад испод да бисте приказали и сакрили други елемент путем промена класе:

• .collapseскрива садржај
• .collapsingпримењује се током прелаза
• .collapse.showприказује садржај

Генерално, препоручујемо коришћење дугмета са data-bs-targetатрибутом. Иако се са семантичке тачке гледишта не препоручује, такође можете користити везу са hrefатрибутом (и 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>

Хоризонтално

Додатак за колапс такође подржава хоризонтално сажимање. Додајте .collapse-horizontalкласу модификатора да бисте пребацили widthуместо heightи поставите а widthна непосредно подређени елемент. Слободно напишите сопствени прилагођени Сасс, користите уграђене стилове или користите наше услужне програме за ширину .

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

Више мета

А <button>или <a>може да прикаже и сакрије више елемената упућивањем на њих помоћу селектора у свом hrefили data-bs-targetатрибуту. Вишеструки <button>или <a>могу да прикажу и сакрију елемент ако сваки од њих референцира са својим hrefили data-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"уместо тога поставите на контроли. Додатак ће аутоматски укључити овај атрибут на контроли на основу тога да ли је склопиви елемент отворен или затворен (преко ЈаваСцрипт-а, или зато што је корисник покренуо други контролни елемент који је такође везан за исти склопиви елемент). Ако ХТМЛ елемент контролног елемента није дугме (нпр. <a>или <div>), атрибутrole="button"треба додати елементу.

Ако ваш контролни елемент циља на један склопиви елемент – тј. data-bs-targetатрибут показује на idселектор – требало би да додате aria-controlsатрибут контролном елементу, који садржи idелемент склопивог. Савремени читачи екрана и сличне помоћне технологије користе овај атрибут како би корисницима пружиле додатне пречице за навигацију директно до самог склопивог елемента.

Имајте на уму да Боотстрап-ова тренутна имплементација не покрива различите опционе интеракције са тастатуром описане у ВАИ-АРИА Аутхоринг Працтицес 1.1 обрасцу хармонике – мораћете да их сами укључите помоћу прилагођеног ЈаваСцрипт-а.

Сасс

Променљиве

$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"и а data-bs-targetелементу да бисте аутоматски доделили контролу над једним или више склопивих елемената. Атрибут data-bs-targetприхвата ЦСС селектор за примену скупљања. Обавезно додајте класу collapseу склопиви елемент. Ако желите да се подразумевано отвори, додајте додатну класу show.

Да бисте додали управљање групама налик хармоници у склопиву област, додајте атрибут података data-bs-parent="#selector". За више информација погледајте страницу о хармоници .

Преко ЈаваСцрипт-а

Омогућите ручно помоћу:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-bs-, као у data-bs-parent="".

Методе

Активира ваш садржај као склопиви елемент. Прихвата опционе опције object.

Можете креирати инстанцу колапса помоћу конструктора, на пример:

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

Догађаји

Боотстрап-ова класа колапса излаже неколико догађаја за спајање на функционалност колапса.

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