Колапс

Како работи

Приклучокот за колапс JavaScript се користи за прикажување и криење на содржината. Копчињата или сидрата се користат како активирања кои се мапирани на одредени елементи што ги менувате. Со собирање елемент ќе се анимира heightод неговата моментална вредност во 0. Со оглед на тоа како CSS се справува со анимации, не можете да користите paddingна .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>

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

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

<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>може да прикаже и скрие повеќе елементи со упатување на нив со избирач во неговиот 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"наместо тоа, поставете ја контролата. Приклучокот автоматски ќе го префрли овој атрибут на контролата врз основа на тоа дали елементот што може да се склопува е отворен или затворен (преку JavaScript или затоа што корисникот активирал друг контролен елемент, исто така поврзан со истиот елемент што се склопува). Ако HTML елементот на контролниот елемент не е копче (на пример, an <a>или <div>), атрибутотrole="button"треба да се додаде на елементот.

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

Имајте предвид дека тековната имплементација на Bootstrap не ги опфаќа различните опционални интеракции на тастатурата опишани во Водичот за авторски практики на ARIA за хармоника - ќе треба сами да ги вклучите со приспособениот JavaScript.

Сас

Променливи

$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 “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете data-bs-custom-class="beautifier"наместо data-bs-customClass="beautifier".

Почнувајќи од Bootstrap 5.2.0, сите компоненти поддржуваат експериментален атрибут за резервирани податоци data-bs-configшто може да содржи едноставна конфигурација на компоненти како низа JSON. Кога елементот има data-bs-config='{"delay":0, "title":123}'и data-bs-title="456"атрибути, конечната titleвредност ќе биде 456и посебните атрибути на податоци ќе ги отфрлат вредностите дадени на data-bs-config. Покрај тоа, постоечките атрибути на податоци можат да ги сместат вредностите на JSON како data-bs-delay='{"show":0,"hide":150}'.

Методи

Ја активира вашата содржина како склоплив елемент. Прифаќа изборни опции object.

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

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

Настани

Класата за колапс на Bootstrap изложува неколку настани за приклучување во функционалноста за колапс.

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