Inval
Wissel die sigbaarheid van inhoud oor jou projek heen met 'n paar klasse en ons JavaScript-inproppe.
Hoe dit werk
Die JavaScript-inpropinvou word gebruik om inhoud te wys en te versteek. Knoppies of ankers word gebruik as snellers wat gekarteer word na spesifieke elemente wat jy wissel. Deur 'n element in te vou sal die height
van sy huidige waarde na animeer 0
. Gegewe hoe CSS animasies hanteer, kan jy nie padding
op 'n .collapse
element gebruik nie. Gebruik eerder die klas as 'n onafhanklike wikkelelement.
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Voorbeeld
Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:
.collapse
verberg inhoud.collapsing
word tydens oorgange toegepas.collapse.show
inhoud toon
Oor die algemeen beveel ons aan om 'n knoppie met die data-target
kenmerk te gebruik. Alhoewel dit nie aanbeveel word vanuit 'n semantiese oogpunt nie, kan jy ook 'n skakel met die href
kenmerk (en 'n role="button"
) gebruik. In beide gevalle word die data-toggle="collapse"
vereis.
<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>
Horisontaal
Die ineenvou-inprop ondersteun ook horisontale ineenstorting. Voeg die .width
wysigerklas by om die oor te skakel width
in plaas van height
en stel 'n width
op die onmiddellike kind-element. Skryf gerus jou eie pasgemaakte Sass, gebruik inlynstyle, of gebruik ons breedte-hulpmiddels .
min-height
stel het om oormatige herverf in ons dokumente te vermy, dit nie uitdruklik vereis word nie.
Slegs die width
op die kind-element word vereis.
<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>
Veelvuldige teikens
A <button>
of <a>
kan veelvuldige elemente wys en versteek deur hulle te verwys met 'n JQuery-kieser in sy href
of data-target
kenmerk. Veelvuldige <button>
of <a>
kan 'n element wys en versteek as hulle elkeen daarna verwys met hul href
of data-target
kenmerk
<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>
Trekklavier voorbeeld
Deur die kaartkomponent te gebruik, kan jy die verstek invougedrag uitbrei om 'n trekklavier te skep. Om die trekklavierstyl behoorlik te bereik, gebruik dit .accordion
as 'n omhulsel.
.show
klas.
<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>
Toeganklikheid
Maak seker dat jy aria-expanded
by die kontrole-element voeg. Hierdie eienskap dra eksplisiet die huidige toestand van die opvoubare element wat aan die beheer gekoppel is, oor aan skermlesers en soortgelyke ondersteunende tegnologieë. As die opvoubare element by verstek gesluit is, moet die kenmerk op die beheerelement 'n waarde van hê aria-expanded="false"
. As jy die opvoubare element gestel het om by verstek oop te wees deur die show
klas te gebruik, stel aria-expanded="true"
eerder op die kontrole. Die inprop sal hierdie kenmerk outomaties op die kontrole skakel, gebaseer op of die opvoubare element oop of toegemaak is of nie (via JavaScript, of omdat die gebruiker 'n ander beheerelement geaktiveer het wat ook aan dieselfde opvoubare element gekoppel is). As die beheerelement se HTML-element nie 'n knoppie is nie (bv. 'n <a>
of <div>
), die kenmerkrole="button"
moet by die element gevoeg word.
As jou kontrole-element 'n enkele opvoubare element teiken – maw die data-target
kenmerk wys na 'n id
kieser – moet jy die aria-controls
kenmerk by die beheerelement voeg, wat die id
van die opvoubare element bevat. Moderne skermlesers en soortgelyke ondersteunende tegnologieë maak gebruik van hierdie kenmerk om gebruikers van bykomende kortpaaie te voorsien om direk na die opvoubare element self te navigeer.
Let daarop dat Bootstrap se huidige implementering nie die verskillende sleutelbordinteraksies dek wat beskryf word in die ARIA Authoring Practices Guide trekklavierpatroon nie - jy sal dit self moet insluit met persoonlike JavaScript.
Gebruik
Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:
.collapse
verberg die inhoud.collapse.show
wys die inhoud.collapsing
word bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar is
Hierdie klasse kan gevind word in _transitions.scss
.
Via data-eienskappe
Voeg net data-toggle="collapse"
en a data-target
by die element om outomaties beheer van een of meer opvoubare elemente toe te ken. Die data-target
kenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapse
by die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by show
.
Om trekklavieragtige groepbestuur by 'n opvoubare area te voeg, voeg die data-kenmerk by data-parent="#selector"
. Verwys na die demo om dit in aksie te sien.
Via JavaScript
Aktiveer handmatig met:
$('.collapse').collapse()
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-parent=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
ouer | kieser | jQuery voorwerp | DOM element | onwaar | As ouer verskaf word, sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie opvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag - dit hang af van die card klas). Die kenmerk moet op die teiken opvoubare area gestel word. |
wissel | boolean | waar | Wissel die opvoubare element by aanroep |
Metodes
Asinchroniese metodes en oorgange
Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .
.collapse(options)
Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Wissel 'n opvoubare element na gewys of versteek. Keer terug na die oproeper voordat die opvoubare element werklik gewys of versteek is (dws voordat die shown.bs.collapse
of hidden.bs.collapse
gebeurtenis plaasvind).
.collapse('show')
Toon 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik gewys is (dws voor die shown.bs.collapse
gebeurtenis plaasvind).
.collapse('hide')
Versteek 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik versteek is (dws voor die hidden.bs.collapse
gebeurtenis plaasvind).
.collapse('dispose')
Vernietig 'n element se ineenstorting.
Gebeurtenisse
Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.
Soort gebeurtenis | Beskrywing |
---|---|
show.bs.ineenstorting | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys.bs.ineenstorting | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). |
versteek.bs.ineenstort | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide metode geroep is. |
verborge.bs.ineenstorting | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})