Ahenda
Muutke oma projekti sisu nähtavust mõne klassi ja meie JavaScripti pistikprogrammidega.
Kuidas see töötab
Sisu kuvamiseks ja peitmiseks kasutatakse JavaScripti ahendamise pistikprogrammi. Nuppe või ankruid kasutatakse päästikutena, mis on vastendatud konkreetsete elementidega, mida lülitate. Elemendi ahendamine animeerib height
selle praegusest väärtusest väärtusele 0
. Arvestades, kuidas CSS animatsioone käsitleb, ei saa te padding
elemendil .collapse
kasutada. Selle asemel kasutage klassi iseseisva mähiselemendina.
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
Näide
Klassimuudatuste kaudu mõne muu elemendi kuvamiseks ja peitmiseks klõpsake allolevatel nuppudel:
.collapse
peidab sisu.collapsing
rakendatakse üleminekute ajal.collapse.show
näitab sisu
Üldiselt soovitame kasutada data-target
atribuudiga nuppu. Ehkki see pole semantilises mõttes soovitatav, võite kasutada ka linki href
atribuudiga (ja role="button"
). Mõlemal juhul data-toggle="collapse"
on nõutav.
<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>
Horisontaalne
Ahendamise pistikprogramm toetab ka horisontaalset ahendamist. Lisage selle asemel .width
modifikaatoriklass ja määrake vahetule alamelemendile a. Kirjutage julgelt oma kohandatud Sass, kasutage tekstisiseseid stiile või kasutage meie laiusutiliite .width
height
width
min-height
meie dokumentides liigsete ülevärvimiste vältimine, pole see selgesõnaliselt nõutav.
Nõutav on ainult width
alamelement.
<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>
Mitu sihtmärki
A <button>
või <a>
saab näidata ja peita mitut elementi, viidates neile oma href
või data-target
atribuudis JQuery valijaga. Mitu elementi <button>
või <a>
saab kuvada ja peita, kui igaüks viitab sellele oma href
või data-target
atribuudiga
<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>
Akordioni näide
Kaardikomponenti kasutades saate akordioni loomiseks laiendada ahendamise vaikekäitumist. Akordioni stiili õigeks saavutamiseks kasutage kindlasti .accordion
ümbrisena.
.show
Tänu klassile
kuvatakse see paneel vaikimisi
.<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>
Juurdepääsetavus
Lisage kindlasti aria-expanded
juhtelement. See atribuut annab selgesõnaliselt edasi ekraanilugejatele ja sarnastele abitehnoloogiatele juhtelemendiga seotud kokkupandava elemendi hetkeoleku. Kui ahendav element on vaikimisi suletud, peaks juhtelemendi atribuudi väärtus olema aria-expanded="false"
. Kui olete määranud show
klassi kasutades kokkupandava elemendi vaikimisi avatuks, määrake aria-expanded="true"
selle asemel juhtelement. Pistikprogramm lülitab selle atribuudi juhtelemendil automaatselt ümber, olenevalt sellest, kas ahendatav element on avatud või suletud (JavaScripti kaudu või seetõttu, et kasutaja käivitas teise juhtelemendi, mis on samuti seotud sama ahendatava elemendiga). Kui juhtelemendi HTML-element ei ole nupp (nt <a>
või <div>
), siis atribuutrole="button"
tuleks elemendile lisada.
Kui teie juhtelement sihib ühte ahendatavat elementi – st data-target
atribuut osutab id
valijale –, peaksite lisama aria-controls
atribuudi juhtelemendile, mis sisaldab id
ahendatavat elementi. Kaasaegsed ekraanilugejad ja sarnased abitehnoloogiad kasutavad seda atribuuti, et pakkuda kasutajatele täiendavaid otseteid, et navigeerida otse kokkupandava elemendi juurde.
Pange tähele, et Bootstrapi praegune rakendus ei hõlma erinevaid klaviatuuri interaktsioone, mida on kirjeldatud ARIA Authoring Practices Guide akordionimustris – peate need ise kohandatud JavaScriptiga kaasama.
Kasutamine
Ahendamise pistikprogramm kasutab raskuste tõstmiseks mõnda klassi:
.collapse
peidab sisu.collapse.show
näitab sisu.collapsing
lisatakse ülemineku alguses ja eemaldatakse, kui see lõpeb
Need klassid on leitavad _transitions.scss
.
Andmeatribuutide kaudu
Lihtsalt lisage elemendile data-toggle="collapse"
ja a data-target
, et määrata automaatselt juhtimine ühe või mitme kokkupandava elemendi üle. Atribuut data-target
aktsepteerib ahendamise rakendamiseks CSS-i valijat. Kindlasti lisage klass collapse
kokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show
.
Akordionilaadse rühmahalduse lisamiseks kokkupandavale alale lisage andmeatribuut data-parent="#selector"
. Selle tegevuse nägemiseks vaadake demo.
JavaScripti kaudu
Luba käsitsi:
$('.collapse').collapse()
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-parent=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
lapsevanem | valija | jQuery objekt | DOM element | vale | Kui on ette nähtud ülem, suletakse selle ahendatava üksuse kuvamisel kõik määratud vanema all olevad kokkupandavad elemendid. (sarnane traditsioonilise akordioni käitumisega – see oleneb card klassist). Atribuut tuleb määrata kokkupandaval sihtpiirkonnal. |
lüliti | tõeväärtus | tõsi | Lülitab kutsumisel kokkupandava elemendi sisse |
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .
.collapse(options)
Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Lülitab kokkupandava elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.collapse
või hidden.bs.collapse
toimumist).
.collapse('show')
Näitab kokkupandavat elementi. Naaseb helistaja juurde enne, kui kokkupandavat elementi on tegelikult näidatud (st enne shown.bs.collapse
sündmuse toimumist).
.collapse('hide')
Peidab kokkupandava elemendi. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult peidetud (st enne hidden.bs.collapse
sündmuse toimumist).
.collapse('dispose')
Hävitab elemendi kokkuvarisemise.
Sündmused
Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.collapse | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.kokkuvarisemine | See sündmus käivitatakse, kui ahendamise element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
peida.bs.kokkuvarisemine | See sündmus käivitatakse kohe, kui hide meetod on välja kutsutud. |
peidetud.bs.kokkuvarisemine | See sündmus käivitatakse, kui ahendamise element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})