Kokwea
Toggle visibilité ya contenus na kati ya projet na yo na mua ba classes na ba plugins na biso ya JavaScript.
Ndenge oyo esalaka
Plugin ya JavaScript ya kokweya esalelamaka mpo na kolakisa mpe kobomba makambo oyo ezali na kati. Ba boutons to ba ancres esalelamaka lokola ba déclencheur oyo e mapé na ba éléments spécifiques oyo o toggler. Ko collapser élément moko eko animer la height
depuis valeur na yango ya lelo na 0
. Soki totali ndenge CSS esimbaka ba animations, okoki te kosalela padding
na .collapse
élément moko. Na esika ya kosala bongo, salelá kelasi lokola eloko ya kokanga oyo ezali na boyokani te.
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Ndakisa
Finá na ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eloko mosusu na nzela ya mbongwana ya kelasi:
.collapse
ebombaka makambo oyo ezali na kati.collapsing
esalelamaka na ntango ya mbongwana.collapse.show
elakisaka makambo oyo ezali na kati
En général, tosengi kosalela bouton oyo ezali na data-target
attribut. Atako esɛngami te na kotalela ndimbola ya maloba, okoki mpe kosalela lien oyo ezali na href
attribut (mpe a role="button"
). Na makambo nyonso mibale, data-toggle="collapse"
esɛngami.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>
Ya kolala
Plugin ya collapse esalisaka pe collapse horizontale. Bakisa .width
kelasi ya modificateur mpo na kosala transition ya na width
esika ya height
mpe kotya a width
na élément ya mwana ya mbala moko. Bozala na bonsomi ya kokoma Sass na bino moko oyo olingi, kosalela ba styles ya inline, to kosalela ba utilitaires na biso ya largeur .
min-height
ensemble mpo na koboya kozongisa langi mingi na ba docs na biso, yango esengeli te polele.
Kaka width
élément oyo ezali na mwana nde esengeli.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Ba cibles ebele
A <button>
to <a>
ekoki kolakisa mpe kobomba ba éléments ebele na kosala référence na yango na selecteur ya JQuery na attribut na yango href
to data-target
. Multiple <button>
to <a>
bakoki kolakisa pe kobomba élément moko soki bango moko na moko azali ko référer yango na bango href
to data-target
attribut
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
Ndakisa ya accordéon
Na kosalelaka eteni ya karte , okoki kobakisela bizaleli ya kokwea na ndenge ya liboso mpo na kosala accordéon. Mpo na kokokisa malamu lolenge ya accordéon, kobosana te kosalela yango .accordion
lokola enveloppe.
.show
classe.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Kozala na makoki ya kozwa yango
Bozala sûr ya kobakisa aria-expanded
na élément ya contrôle. Attribut oyo ezo transmettre explicitement état actuel ya élément collapsible lié na contrôle na ba lecteurs d'écran na ba technologies d'assistance ya ndenge wana. Soki élément collapsible ekangami na ndenge ya défaut, attribut na élément ya contrôle esengeli kozala na valeur ya aria-expanded="false"
. Soki otie élément collapsible ezala ouvert par défaut kosalela show
classe, tia aria-expanded="true"
na contrôle na esika na yango. Plugin eko changer automatiquement attribut oyo na contrôle selon soki élément collapsible efungolami to ekangami to te (na nzela ya JavaScript, to mpo mosaleli a déclenché élément mosusu ya contrôle mpe ekangami na élément collapsible moko). Soki élément HTML ya élément ya contrôle ezali bouton te (ndakisa, an <a>
to <div>
), attributrole="button"
esengeli kobakisa yango na elemande yango.
Soki élément ya contrôle na yo ezali ko cibler élément moko collapsible – c’est-à-dire data-target
attribut ezali ko pointer id
sélecteur moko – esengeli obakisa aria-controls
attribut na élément de contrôle, oyo ezali na id
ya élément collapsible. Ba lecteurs d’écran ya mikolo oyo mpe ba technologies ya assistance ya ndenge wana esalelaka attribut oyo mpo na kopesa ba usagers ba raccourcis ya kobakisa mpo na ko naviguer directement na élément collapsible yango moko.
Yeba ete bosaleli ya Bootstrap ya lelo etali te ba interactions ndenge na ndenge ya clavier oyo elimbolami na motindo ya accordéon ya ARIA Authoring Practices Guide - ekosenga otia yo moko oyo na JavaScript personnalisé.
Kosalela yango
Plugin ya collapse esalelaka mua ba classes pona ko gérer levage ya kilo:
.collapse
ebombaka makambo oyo ezali na kati.collapse.show
elakisaka makambo oyo ezali na kati.collapsing
ebakisami ntango mbongwana ebandi, mpe elongolami ntango esili
Bakelasi yango ekoki kozwama na _transitions.scss
.
Na nzela ya ba attributs ya ba données
Bobakisa kaka data-toggle="collapse"
mpe a data-target
na élément mpo na ko assigner automatiquement contrôle ya élément moko to ebele oyo ekoki ko collapsible. Attribut data-target
endimi moponi ya CSS mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapse
na élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa show
.
Mpo na kobakisa boyangeli ya etuluku lokola accordéon na esika oyo ekoki kokangama, bakisa attribut ya ba données data-parent="#selector"
. Tala démonstration po omona likambo oyo na action.
Na nzela ya JavaScript
Activer manuellement na:
$('.collapse').collapse()
Makambo oyo okoki kopona
Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-
, lokola na data-parent=""
.
Nkombo | Lolenge | Mbeba | Ndimbola |
---|---|---|---|
moboti | moponi | jEloko ya motuna | Elemento DOM | lokuta | Soki moboti epesami, boye biloko nyonso oyo ekoki kokangama na nse ya moboti oyo elakisami ekokangama ntango eloko oyo ekoki kokangama ekolakisama. (ekokani na bizaleli ya bonkoko ya accordéon - yango etali card kelasi). Attribut esengeli ezala na esika oyo ekoki kokangama na cible. |
kobongola makambo | boolean | ya solo | Ebalusaka élément collapsible na invocation |
Ba méthodes ya kosala
Ba méthodes asynchrones na ba transitions
Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .
Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .
.collapse(options)
Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Ezali kobongola eloko oyo ekoki kokangama mpo na kolakisa to kobombama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ezala mpenza kolakisa to ebombama (elingi koloba liboso ete likambo shown.bs.collapse
to hidden.bs.collapse
esalema).
.collapse('show')
Ezali kolakisa eleman moko oyo ekoki kokangama. Ezongisaka na mobengi yambo ete eloko oyo ekoki kokangama elakisama mpenza (elingi koloba liboso ete shown.bs.collapse
likambo esalema).
.collapse('hide')
Ebombaka eloko moko oyo ekoki kokangama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ebombama mpenza (elingi koloba liboso ete hidden.bs.collapse
likambo esalema).
.collapse('dispose')
Ebebisaka collapse ya élément moko.
Makambo oyo esalemaki
Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.
Lolenge ya likambo | Ndimbola |
---|---|
elakiseli.bs.kokwea | Evenement oyo ezo beta mbala moko tango show méthode ya instance ebengami. |
elakisami.bs.kokwea | Evenement oyo ezo beta tango élément ya collapse esalemi visible na mosaleli (ekozela ba transitions ya CSS esila). |
kobomba.bs.kokwea | Evenement oyo ebetamaka mbala moko tango hide méthode ebengami. |
ebombami.bs.kokwea | Evenement oyo ezo beta tango élément ya collapse ebombami na mosaleli (ekozela ba transitions ya CSS esila). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})