Pa'u
Fa'afeso'ota'i le va'aiga o mea i totonu o lau galuega fa'atasi ma nai vasega ma matou JavaScript plugins.
E faapefea ona galue
O lo'o fa'aogaina le fa'apalapala JavaScript e fa'aali ma nana ai mea. O fa'amau po'o taula o lo'o fa'aaogaina e fai ma fa'aoso e fa'afanua i elemene fa'apitoa o lo'o e fesuia'i. O le soloia o se elemene o le a fa'aola ai le height
mai lona tau o lo'o iai nei i le 0
. Tuuina atu pe faʻafefea ona faʻaogaina e le CSS faʻafiafiaga, e le mafai ona e faʻaogaina padding
i luga o se .collapse
elemene. Nai lo lena, fa'aaoga le vasega e fai ma mea fa'apipi'i tuto'atasi.
prefers-reduced-motion
aufaasālalau. Va'ai le vaega
fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .
Faataitaiga
Kiliki fa'amau i lalo e fa'aali ma nana se isi elemene e ala i suiga o vasega:
.collapse
natia mea e aofia ai.collapsing
e fa'aaogaina i taimi o suiga.collapse.show
fa'aalia anotusi
E masani lava, matou te fautuaina le faʻaogaina o se faʻamau ma le data-bs-target
uiga. E ui e le fautuaina mai se manatu faʻapitoa, e mafai foi ona e faʻaogaina se fesoʻotaʻiga ma le href
uiga (ma le role="button"
). I tulaga uma e lua, data-bs-toggle="collapse"
e manaʻomia.
<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>
Tauliaga e tele
A <button>
po'o <a>
e mafai ona fa'aali ma nana ni elemene se tele e ala i le fa'asinoina i se tagata filifilia i lona uiga href
po'o lona data-bs-target
uiga. Fa'atele <button>
pe mafai ona fa'aali ma nana se elemene pe a ta'ua ta'itasi ma o <a>
latou uigahref
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>
Avanoa
Ia mautinoa e faaopoopo aria-expanded
i le elemene pulea. O lenei uiga o lo'o fa'ailoa manino mai ai le tulaga o lo'o i ai nei o le elemene e mafai ona pa'u o lo'o nonoa i le fa'atonuga i le au faitau mata'itusi ma isi tekonolosi fesoasoani tutusa. Afai o le elemene e mafai ona pa'u ua tapunia ona o le faaletonu, o le uiga o le elemene pulea e tatau ona i ai se tau o le aria-expanded="false"
. Afai ua e setiina le mea e mafai ona pa'u ina ia tatala e ala ile fa'aogaina ole show
vasega, fa'ae'e aria-expanded="true"
ile pule. O le plugin o le a otometi lava ona fesuiaʻi lenei uiga i luga o le pule e faʻatatau pe ua tatalaina pe tapuni le elemene collapsible pe leai (e ala i le JavaScript, pe ona o le tagata faʻaoga na faʻaosoina se isi elemene faʻatonutonu e nonoa i le elemene tutusa lava). Afai o le elemene HTML e pulea e le o se faamau (faataitaiga, <a>
po o le <div>
), o le uigarole="button"
e tatau ona faaopoopo i le elemene.
Afai o lau elemene fa'atonutonu o lo'o fa'atatau i se elemene e tasi e mafai ona pa'u - o le data-bs-target
uiga o lo'o fa'asino i se id
tagata filifilia - e tatau ona e fa'aopoopoina le aria-controls
uiga i le elemene fa'atonutonu, o lo'o iai le id
elemene e mafai ona pa'u. Ua fa'aogaina e le aufaitau mata fa'aonaponei ma fa'atekonolosi feso'ota'i tutusa lenei uiga e tu'uina atu ai i tagata fa'aoga ni ala pupuu fa'aopoopo e fa'atautaia sa'o ai i le elemene e mafai ona pa'u.
Manatua o le faʻatinoga o Bootstrap o loʻo iai nei e le o aofia ai fesoʻotaʻiga keyboard eseese o loʻo faʻamatalaina i le WAI-ARIA Authoring Practices 1.1 accordion pattern - e tatau ona e faʻapipiʻiina oe lava i le JavaScript masani.
Sass
Fuafuaga
$transition-collapse: height .35s ease;
Vasega
E mafai ona maua vasega suiga i lalo ona scss/_transitions.scss
o lo'o fefa'asoaa'i i vaega e tele (pa'u ma accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Fa'aoga
O le pa'u fa'apipi'i fa'aoga ni nai vasega e taulima ai le si'i mamafa:
.collapse
nana le anotusi.collapse.show
fa'aalia le anotusi.collapsing
e faaopoopo pe a amata le suiga, ma aveese pe a uma
O nei vasega e mafai ona maua i _transitions.scss
.
E ala i fa'amaumauga uiga
Na'o le fa'aopoopo data-bs-toggle="collapse"
ma le a data-bs-target
i le elemene e otometi ona tu'uina atu le fa'atonuga o se tasi pe sili atu elemene e mafai ona pa'u. E data-bs-target
talia e le uiga le CSS filifilia e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapse
i le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo show
.
Ina ia fa'aopoopo le pulega vaega e pei o le akordion i se vaega e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-bs-parent="#selector"
. Va'ai i le demo e va'ai ai i lenei gaioiga.
E ala i le JavaScript
Fa'aaga ma le lima ile:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Filifiliga
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-
, pei o le data-bs-parent=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
parent |
tagata filifilia | jQuery mea | DOM elemene | false |
Afai e tu'uina mai matua, ona tapunia uma lea o elemene e mafai ona pa'u i lalo o le matua fa'apitoa pe a fa'aalia le mea lea e mafai ona pa'u. (e tutusa ma amioga fa'ale-aganu'u - e fa'alagolago i le card vasega). O le uiga e tatau ona seti i luga o le vaega e mafai ona pa'u. |
toggle |
boolean | true |
Fa'asolo le elemene e mafai ona pa'u i luga ole valaau |
Metotia
Metotia ma suiga e le tutusa
O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .
Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object
.
E mafai ona e fatuina se faʻataʻitaʻiga pa'ū ma le faufale, mo se faʻataʻitaʻiga:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metotia | Fa'amatalaga |
---|---|
toggle |
Su'e se elemene e mafai ona pa'u e fa'aali pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapse po'o le hidden.bs.collapse mea na tupu). |
show |
Fa'aalia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni le elemene e mafai ona pa'u (fa'ata'ita'iga, a'o le'i tupu le shown.bs.collapse mea na tupu). |
hide |
Natia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i natia moni le elemene e mafai ona pa'u (fa'ata'ita'iga, a'o le'i tupu le hidden.bs.collapse mea na tupu). |
dispose |
Fa'aleagaina le pa'u o se elemene. (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM) |
getInstance |
Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga paʻu e fesoʻotaʻi ma se elemene DOM, e mafai ona e faʻaogaina e pei o lenei:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metotia static e toe faʻafoʻi mai ai se faʻataʻitaʻiga paʻu e fesoʻotaʻi ma se elemene DOM pe fatuina se mea fou pe a leʻi amataina. E mafai ona e faʻaaogaina e pei o lenei:bootstrap.Collapse.getOrCreateInstance(element) |
Mea na tutupu
O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.
Ituaiga mea na tupu | Fa'amatalaga |
---|---|
show.bs.collapse |
E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. |
shown.bs.collapse |
O lenei mea e tupu pe a faʻaalia se elemene paʻu i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
hide.bs.collapse |
O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le metotia. |
hidden.bs.collapse |
O lenei mea e tupu pe a natia se elemene pa'ū mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})