Sutraukti
Perjunkite projekto turinio matomumą naudodami kelias klases ir „JavaScript“ papildinius.
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ą, height
jo dabartinė vertė bus animuota į 0
. Atsižvelgiant į tai, kaip CSS apdoroja animacijas, negalite naudoti padding
elemento .collapse
. Vietoj to naudokite klasę kaip nepriklausomą vyniojimo elementą.
prefers-reduced-motion
medijos užklausos. Žr
. mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .
Pavyzdys
Spustelėkite toliau pateiktus mygtukus, kad peržiūrint klasę būtų rodomas ir paslėptas kitas elementas:
.collapse
slepia turinį.collapsing
taikomas perėjimų metu.collapse.show
rodo turinį
Paprastai rekomenduojame naudoti mygtuką su data-bs-target
atributu. Nors semantiniu požiūriu nerekomenduojama, taip pat galite naudoti nuorodą su href
atributu (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>
Keli taikiniai
A <button>
arba <a>
gali rodyti ir slėpti kelis elementus, nurodant juos naudodami parinkiklį jo href
arba data-bs-target
atribute. Keli <button>
arba <a>
gali rodyti ir slėpti elementą, jei kiekvienas nurodo jį savo href
arba data-bs-target
atributu
<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-expanded
prie 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 show
klasę 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-target
atributas nurodo id
parinkiklį – turėtumėte pridėti aria-controls
atributą prie valdymo elemento, kuriame yra id
sutraukiamas 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ų WAI-ARIA Authoring Practices 1.1 akordeono šablone – jas turėsite įtraukti patys naudodami tinkintą „JavaScript“.
Sass
Kintamieji
$transition-collapse: height .35s ease;
Klasės
Sutraukti perėjimo klases galima rasti, scss/_transitions.scss
nes jos yra bendrinamos keliuose komponentuose (sutraukimas ir akordeonas).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Naudojimas
Sutraukimo papildinys naudoja keletą klasių, kad galėtų susidoroti su sunkiu kėlimu:
.collapse
slepia turinį.collapse.show
rodo turinį.collapsing
pridedamas, 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-target
prie elemento, kad automatiškai priskirtumėte vieno ar daugiau sutraukiamų elementų valdymą. data-bs-target
Atributas priima CSS parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapse
prie 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"
. Norėdami pamatyti, kaip tai veikia, žr. demonstracinę versiją.
Per JavaScript
Įgalinti rankiniu būdu su:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Galimybės
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-
, kaip ir data-bs-parent=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
parent |
parinkiklis | jQuery objektas | DOM elementas | false |
Jei pateikiamas pirminis elementas, visi sutraukiami elementai po nurodyto pirminio elemento bus uždaryti, kai bus parodytas šis sutraukiamas elementas. (panašus į tradicinį akordeono elgesį – tai priklauso nuo card klasės). Atributas turi būti nustatytas tikslinėje sutraukiamoje srityje. |
toggle |
loginis | true |
Perjungia sutraukiamą elementą iškvietimo metu |
Metodai
Asinchroniniai metodai ir perėjimai
Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .
Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .
Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object
.
Galite sukurti sutraukimo egzempliorių naudodami konstruktorių, pavyzdžiui:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metodas | apibūdinimas |
---|---|
toggle |
Perjungia sutraukiamą elementą į rodomą arba paslėptą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų nebuvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.collapse arba hidden.bs.collapse įvykiui). |
show |
Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs). |
hide |
Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs). |
dispose |
Destroys an element's collapse. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Collapse.getOrCreateInstance(element) |
Events
Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.
Event type | Description |
---|---|
show.bs.collapse |
This event fires immediately when the show instance method is called. |
shown.bs.collapse |
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.collapse |
This event is fired immediately when the hide method has been called. |
hidden.bs.collapse |
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})