Sutraukti

Kaip tai veikia

Sutraukti JavaScript įskiepis naudojamas turiniui rodyti ir slėpti. Mygtukai arba inkarai naudojami kaip aktyvikliai, susieti su konkrečiais jūsų perjungiamais elementais. Sutraukus elementą, heightjo dabartinė vertė bus animuota į 0. Atsižvelgiant į tai, kaip CSS apdoroja animacijas, negalite naudoti paddingelemento .collapse. Vietoj to naudokite klasę kaip nepriklausomą vyniojimo elementą.

Pavyzdys

Spustelėkite toliau pateiktus mygtukus, kad peržiūrint klasę būtų rodomas ir paslėptas kitas elementas:

• .collapseslepia turinį
• .collapsingtaikomas perėjimų metu
• .collapse.showrodo turinį

Paprastai rekomenduojame naudoti mygtuką su data-bs-targetatributu. Nors semantiniu požiūriu nerekomenduojama, taip pat galite naudoti nuorodą su hrefatributu (ir role="button"). Abiem atvejais data-bs-toggle="collapse"būtina.

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

Horizontaliai

Sutraukimo įskiepis taip pat palaiko horizontalų sutraukimą. Įtraukite .collapse-horizontalmodifikatoriaus klasę, kad pakeistumėte ją width, heightir nustatykite widthtiesioginį antrinį elementą. Nedvejodami rašykite savo pasirinktinį Sass, naudokite eilutinius stilius arba naudokite mūsų pločio įrankius .

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

Keli tikslai

A <button>arba <a>gali rodyti ir slėpti kelis elementus, nurodant juos naudodami parinkiklį jo hrefarba data-bs-targetatribute. Keli <button>arba <a>gali rodyti ir slėpti elementą, jei kiekvienas nurodo jį savo hrefarba data-bs-targetatributu

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

Prieinamumas

Būtinai pridėkite aria-expandedprie valdymo elemento. Šis atributas aiškiai perteikia esamą sutraukiamo elemento, susieto su valdikliu, būseną ekrano skaitytuvams ir panašioms pagalbinėms technologijoms. Jei sutraukiamas elementas uždarytas pagal numatytuosius nustatymus, valdymo elemento atributo vertė turi būti aria-expanded="false". Jei naudodami showklasę nustatėte, kad sutraukiamasis elementas būtų atidarytas pagal numatytuosius nustatymus, aria-expanded="true"vietoj jo nustatykite valdiklį. Papildinys automatiškai perjungs šį valdiklio atributą, atsižvelgdamas į tai, ar sutraukiamas elementas buvo atidarytas ar uždarytas (naudojant „JavaScript“ arba todėl, kad vartotojas suaktyvino kitą valdymo elementą, taip pat susietą su tuo pačiu sutraukiamu elementu). Jei valdymo elemento HTML elementas nėra mygtukas (pvz., <a>arba <div>), atributasrole="button"reikia pridėti prie elemento.

Jei jūsų valdymo elementas taikomas vienam sutraukiamam elementui – ty data-bs-targetatributas nurodo idparinkiklį – turėtumėte pridėti aria-controlsatributą prie valdymo elemento, kuriame yra idsutraukiamas elementas. Šiuolaikiniai ekrano skaitytuvai ir panašios pagalbinės technologijos naudoja šį atributą, kad suteiktų vartotojams papildomų sparčiųjų klavišų, leidžiančių tiesiogiai pereiti prie paties sutraukiamo elemento.

Atminkite, kad dabartinis „Bootstrap“ diegimas neapima įvairių pasirenkamų klaviatūros sąveikų, aprašytų „ ARIA Authoring Practices Guide“ akordeono šablone – jas turėsite įtraukti patys naudodami tinkintą „JavaScript“.

Sass

Kintamieji

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

Klasės

Sutraukti perėjimo klases galima rasti, scss/_transitions.scssnes jos yra bendrinamos keliuose komponentuose (sutraukimas ir akordeonas).

.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);
  }
}

Naudojimas

Sutraukimo papildinys naudoja keletą klasių, kad galėtų susidoroti su sunkiu kėlimu:

• .collapseslepia turinį
• .collapse.showrodo turinį
• .collapsingpridedamas, kai prasideda perėjimas, ir pašalinamas, kai jis baigiasi

Šias klases galima rasti _transitions.scss.

Per duomenų atributus

Tiesiog pridėkite data-bs-toggle="collapse"ir a data-bs-targetprie elemento, kad automatiškai priskirtumėte vieno ar daugiau sutraukiamų elementų valdymą. data-bs-targetAtributas priima CSS parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę show.

Norėdami įtraukti į akordeoną panašų grupės valdymą sutraukiamoje srityje, pridėkite duomenų atributą data-bs-parent="#selector". Daugiau informacijos rasite akordeono puslapyje .

Per JavaScript

Įgalinti rankiniu būdu su:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Galimybės

Kadangi parinktis galima perduoti naudojant duomenų atributus arba „JavaScript“, galite pridėti parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="{value}". Perduodant parinktis per duomenų atributus , būtinai pakeiskite parinkties pavadinimo didžiosios raidės tipą iš „ camelCase “ į „ kebab-case “. Pavyzdžiui, naudokite data-bs-custom-class="beautifier"vietoj data-bs-customClass="beautifier".

Nuo 5.2.0 versijos „Bootstrap“ visi komponentai palaiko eksperimentinį rezervuotų duomenų atributą data-bs-config, kuriame galima laikyti paprastą komponento konfigūraciją kaip JSON eilutę. Kai elementas turi data-bs-config='{"delay":0, "title":123}'ir data-bs-title="456"atributus, galutinė titlereikšmė bus 456ir atskiri duomenų atributai nepaisys reikšmių, pateiktų data-bs-config. Be to, esamuose duomenų atributuose gali būti JSON reikšmės, pvz ., data-bs-delay='{"show":0,"hide":150}'.

Metodai

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

Galite sukurti sutraukimo egzempliorių naudodami konstruktorių, pavyzdžiui:

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

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

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