Згарнуць

Як гэта працуе

Плагін JavaScript для згортвання выкарыстоўваецца для паказу і схавання змесціва. Кнопкі або якары выкарыстоўваюцца ў якасці трыгераў, якія супастаўляюцца з пэўнымі элементамі, якія вы перамыкаеце. Згортванне элемента анімуе heightяго бягучае значэнне да 0. Улічваючы, як CSS апрацоўвае анімацыю, вы не можаце выкарыстоўваць 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непасрэднага даччынага элемента. Не саромейцеся пісаць свой уласны 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>

Некалькі мэтаў

Аб'ект <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 элемента кіравання не з'яўляецца кнопкай (напрыклад, <a>або <div>), атрыбутrole="button"трэба дадаць да элемента.

Калі ваш элемент кіравання арыентаваны на адзін згортваемы элемент - г.зн. data-bs-targetатрыбут паказвае на idселектар - вы павінны дадаць aria-controlsатрыбут да элемента кіравання, утрымліваючы idэлемент згортвання. Сучасныя праграмы чытання з экрана і падобныя дапаможныя тэхналогіі выкарыстоўваюць гэты атрыбут, каб даць карыстальнікам дадатковыя цэтлікі для навігацыі непасрэдна да самога разборнага элемента.

Звярніце ўвагу, што бягучая рэалізацыя Bootstrap не ахоплівае розныя дадатковыя ўзаемадзеянні з клавіятурай, апісаныя ў шаблоне ARIA Authoring Practices Guide - вам трэба будзе ўключыць іх самастойна з карыстальніцкім 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"і data-bs-targetда элемента, каб аўтаматычна прызначыць кіраванне адным або некалькімі складанымі элементамі. Атрыбут data-bs-targetпрымае селектар CSS для прымянення згортвання. Абавязкова дадайце клас collapseда разборнага элемента. Калі вы хочаце, каб ён быў адкрыты па змаўчанні, дадайце дадатковы клас show.

Каб дадаць у згортваемую вобласць кіраванне групамі, падобнае да акардэона, дадайце атрыбут data 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, усе кампаненты падтрымліваюць эксперыментальны атрыбут зарэзерваваных даных 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...
})