Ynsakje
Skeakelje de sichtberens fan ynhâld yn jo projekt mei in pear klassen en ús JavaScript-plugins.
Hoe't it wurket
It ynstoarten JavaScript-plugin wurdt brûkt om ynhâld te sjen en te ferbergjen. Knoppen of ankers wurde brûkt as triggers dy't yn kaart brocht wurde oan spesifike eleminten dy't jo wikselje. It ynklappen fan in elemint sil de animearje height
fan syn hjoeddeistige wearde nei 0
. Sjoen hoe't CSS animaasjes omgiet, kinne jo net brûke padding
op in .collapse
elemint. Brûk ynstee de klasse as in ûnôfhinklik wrappingselemint.
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Foarbyld
Klikje op de knoppen hjirûnder om in oar elemint te sjen en te ferbergjen fia klassewizigingen:
.collapse
ferberget ynhâld.collapsing
wurdt tapast by oergongen.collapse.show
toant ynhâld
Yn 't algemien riede wy oan om in knop te brûken mei it data-bs-target
attribút. Hoewol net oanrikkemandearre út in semantysk eachpunt, kinne jo ek in keppeling brûke mei it href
attribút (en in role="button"
). Yn beide gefallen data-bs-toggle="collapse"
is it nedich.
<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>
Horizontaal
It ynstoartplugin stipet ek horizontaal ynstoarten. Foegje de .collapse-horizontal
modifier klasse ta oergong de width
ynstee fan height
en set in width
op de direkte bern elemint. Fiel jo frij om jo eigen oanpaste Sass te skriuwen, ynline-stilen te brûken, of ús breedte-hulpprogramma's te brûken .
min-height
set hat om oermjittige repaints yn ús dokuminten te foarkommen, dit net eksplisyt fereaske is.
Allinne it width
op it bern elemint is fereaske.
<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>
Meardere doelen
A <button>
of <a>
kin meardere eleminten sjen en ferbergje troch se te ferwizen mei in selector yn har href
of data-bs-target
attribút. Meardere <button>
of <a>
kin in elemint sjen en ferbergje as se elk ferwize mei har href
of data-bs-target
attribút
<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>
Tagonklikheid
Wês wis dat jo tafoegje aria-expanded
oan it kontrôle elemint. Dit attribút bringt eksplisyt de hjoeddeistige tastân oer fan it ynklapbere elemint bûn oan 'e kontrôle oan skermlêzers en ferlykbere assistintetechnologyen. As it ynklapbere elemint standert sletten is, moat it attribút op it kontrôleelemint in wearde hawwe fan aria-expanded="false"
. As jo it ynklapbere elemint ynsteld hawwe om standert iepen te wêzen mei de show
klasse, set aria-expanded="true"
dan op 'e kontrôle ynstee. De plugin sil dit attribút automatysk wikselje op 'e kontrôle basearre op it al of net it ynklapbere elemint is iepene of sluten (fia JavaScript, of om't de brûker in oar kontrôleelemint trigger dat ek ferbûn is oan itselde ynklapbere elemint). As it HTML-elemint fan it kontrôleelemint gjin knop is (bygelyks in <a>
of <div>
), it attribútrole="button"
moatte wurde tafoege oan it elemint.
As jo kontrôle elemint is rjochte op in inkele ynklapbere elemint - dat wol sizze it data-bs-target
attribút wiist nei in id
selector - Jo moatte tafoegje it aria-controls
attribút oan it kontrôle elemint, mei dêryn de id
fan it ynklapbere elemint. Moderne skermlêzers en ferlykbere assistinte technologyen meitsje gebrûk fan dit attribút om brûkers ekstra fluchtoetsen te jaan om direkt nei it ynklapbere elemint sels te navigearjen.
Tink derom dat de hjoeddeistige ymplemintaasje fan Bootstrap de ferskate opsjonele toetseboerdynteraksjes net dekt dy't beskreaun binne yn it WAI-ARIA Authoring Practices 1.1 akkordeonpatroan - jo moatte dizze sels opnimme mei oanpast JavaScript.
Sass
Fariabelen
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Klassen
Ynstoarting oergong klassen kinne fûn wurde yn scss/_transitions.scss
as dizze wurde dield oer meardere komponinten (ynstoarten en akkordeon).
.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);
}
}
Gebrûk
It ynstoartplugin brûkt in pear klassen om it swiere opheffing te behanneljen:
.collapse
ferberget de ynhâld.collapse.show
toant de ynhâld.collapsing
wurdt tafoege as de oergong begjint, en fuortsmiten as it klear is
Dizze klassen kinne fûn wurde yn _transitions.scss
.
Fia data attributen
Foegje gewoan data-bs-toggle="collapse"
en in data-bs-target
oan it elemint ta om automatysk kontrôle fan ien of mear ynklapbere eleminten ta te jaan. It data-bs-target
attribút akseptearret in CSS-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapse
oan it ynklapbere elemint. As jo wolle dat it standert iepen is, foegje dan de ekstra klasse ta show
.
Om akkordeon-like groepbehear ta te foegjen oan in ynklapber gebiet, foegje it data-attribút ta data-bs-parent="#selector"
. Sjoch op de akkordeonside foar mear ynformaasje.
Fia JavaScript
Ynskeakelje manuell mei:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-
, lykas yn data-bs-parent=""
.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
parent |
kiezer | jQuery objekt | DOM elemint | false |
As âlder wurdt levere, dan sille alle ynklapbere eleminten ûnder de opjûne âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach - dit is ôfhinklik fan 'e card klasse). It attribút moat ynsteld wurde op it ynklapbere doelgebiet. |
toggle |
boolean | true |
Skeakelt it ynklapbere elemint by oprop |
Metoaden
Asynchrone metoaden en transysjes
Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object
.
Jo kinne in ynklapeksimplaar meitsje mei de konstruktor, bygelyks:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metoade | Beskriuwing |
---|---|
toggle |
Skeakelt in ynklapber elemint nei werjûn of ferburgen. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.collapse of hidden.bs.collapse bart). |
show |
Toant in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint is werjûn (bgl. foardat it shown.bs.collapse barren plakfynt). |
hide |
Ferberget in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint feitlik ferburgen is (bgl. foardat it hidden.bs.collapse barren bart). |
dispose |
Ferneatiget it ynstoarten fan in elemint. (Ferwidert bewarre gegevens op it DOM-elemint) |
getInstance |
Statyske metoade wêrmei jo it ynstoarteksimplaar kinne krije ferbûn oan in DOM-elemint, jo kinne it sa brûke:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Statyske metoade dy't in ynstoarteksimplaar werombringt ferbûn oan in DOM-elemint of in nij oanmeitsje foar it gefal dat it net inisjalisearre is. Jo kinne it sa brûke:bootstrap.Collapse.getOrCreateInstance(element) |
Eveneminten
De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.
Event type | Beskriuwing |
---|---|
show.bs.collapse |
Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.collapse |
Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.collapse |
Dit evenemint wurdt ûntslein fuortendaliks as de hide metoade is oanroppen. |
hidden.bs.collapse |
Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})