Фурӯпошӣ

Он чӣ гуна кор мекунад

Васлкунаки colapse 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ва widthдар унсури кӯдаки фаврӣ a муқаррар кунед. Озод ҳис кунед, ки 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-и элементи идоракунӣ тугма набошад (масалан, <a>ё <div>), аттрибутrole="button"бояд ба элемент илова карда шавад.

Агар элементи идоракунии шумо як унсури ҷамъшавандаро ҳадаф қарор диҳад, яъне data-bs-targetатрибут ба idселектор ишора кунад - шумо бояд aria-controlsатрибутро ба унсури идоракунӣ, ки дорои унсури пӯшидашаванда аст, илова кунед id. Хонандагони экрани муосир ва технологияҳои ёрирасони шабеҳ аз ин атрибут истифода мебаранд, то ба корбарон миёнабурҳои иловагӣ фароҳам оранд, то мустақиман ба худи унсури пӯшидашаванда ҳаракат кунанд.

Аҳамият диҳед, ки татбиқи ҷории Bootstrap амалҳои гуногуни ихтиёрии клавиатураро, ки дар намунаи аккордеони Дастури ARIA Authoring Practices Review тавсиф шудаанд, дар бар намегирад - шумо бояд онҳоро худатон бо 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-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...
})