Apseимерелү

Ничек бу эшли

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>

Горизонталь

Apseимерелү плагины горизонталь җимерелүне дә хуплый. Аның урынына .collapse-horizontalкүчү өчен модификатор классын өстәгез һәм балалар элементына урнаштырыгыз. Customзегезнең махсус Sass язарга, эчке стильләрне кулланырга, яисә безнең киңлек коммуналь хезмәтләрен кулланырга иренегез .widthheightwidth

<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 Авторлык Практикасы Белешмә Аккордеон үрнәгендә тасвирланган төрле факультатив клавиатура үзара бәйләнешне үз эченә алмый - сезгә аларны JavaScript белән кертергә кирәк булачак.

Сасс

Variзгәрешләр

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Дәресләр

Collимерелү күчү классларын табарга мөмкин, 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);
  }
}

Куллану

Apseимерелү плагины авыр күтәрү өчен берничә класс куллана:

• .collapseэчтәлекне яшерә
• .collapse.showэчтәлеген күрсәтә
• .collapsingкүчү башлангач өстәлә, беткәч бетерелә

Бу классларны табып була _transitions.scss.

Мәгълүмат атрибутлары аша

Бер яки берничә җимерелә торган элементларга контрольне автоматик рәвештә билгеләү data-bs-toggle="collapse"өчен data-bs-targetэлементка өстәгез. data-bs-targetАтрибут җимерелүне куллану өчен CSS селекторын кабул итә . Классны collapseҗимерелә торган элементка өстәргә онытмагыз. Килешү ачык булса, өстәмә класс өстәгез show.

Accимерелә торган мәйданга аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез 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...
})