Ahenda

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 heightselle praegusest väärtusest väärtusele 0. Arvestades, kuidas CSS animatsioone käsitleb, ei saa te paddingelemendil .collapsekasutada. Selle asemel kasutage klassi iseseisva mähiselemendina.

Näide

Klassimuudatuste kaudu mõne muu elemendi kuvamiseks ja peitmiseks klõpsake allolevatel nuppudel:

• .collapsepeidab sisu
• .collapsingrakendatakse üleminekute ajal
• .collapse.shownäitab sisu

Üldiselt soovitame kasutada data-bs-targetatribuudiga nuppu. Ehkki see pole semantilises mõttes soovitatav, võite kasutada ka linki hrefatribuudiga (ja role="button"). Mõlemal juhul data-bs-toggle="collapse"on nõutav.

<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>

Horisontaalne

Ahendamise pistikprogramm toetab ka horisontaalset ahendamist. Lisage selle asemel .collapse-horizontalmodifikaatoriklass ja määrake vahetule alamelemendile a. Kirjutage julgelt oma kohandatud Sass, kasutage tekstisiseseid stiile või kasutage meie laiusutiliite .widthheightwidth

<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>

Mitu sihtmärki

A <button>või <a>saab kuvada ja peita mitut elementi, viidates neile selle hrefvõi data-bs-targetatribuudis oleva valijaga. Mitu elementi <button>või <a>saab kuvada ja peita, kui igaüks viitab sellele oma hrefvõi data-bs-targetatribuudiga

<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>

Juurdepääsetavus

Lisage kindlasti aria-expandedjuhtelement. 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 showklassi 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-bs-targetatribuut osutab idvalijale –, peaksite lisama aria-controlsatribuudi juhtelemendile, mis sisaldab idahendatavat 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 valikulisi klaviatuuri interaktsioone, mida on kirjeldatud ARIA Authoring Practices Guide'i akordionimustris – peate need ise kohandatud JavaScripti lisama.

Sass

Muutujad

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

klassid

Ülemineku ahendamise klasse võib leida, scss/_transitions.scsskuna need on jagatud mitme komponendi vahel (kokkuvarisemine ja akordion).

.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);
  }
}

Kasutamine

Ahendamise pistikprogramm kasutab raskuste tõstmiseks mõnda klassi:

• .collapsepeidab sisu
• .collapse.shownäitab sisu
• .collapsinglisatakse ülemineku alguses ja eemaldatakse, kui see lõpeb

Need klassid on leitavad _transitions.scss.

Andmeatribuutide kaudu

Lihtsalt lisage elemendile data-bs-toggle="collapse"ja a data-bs-target, et määrata automaatselt juhtimine ühe või mitme kokkupandava elemendi üle. Atribuut data-bs-targetaktsepteerib ahendamise rakendamiseks CSS-i valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show.

Akordionilaadse rühmahalduse lisamiseks kokkupandavale alale lisage andmeatribuut data-bs-parent="#selector". Lisateabe saamiseks vaadake akordioni lehekülge .

JavaScripti kaudu

Luba käsitsi:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

meetodid

Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.

Konstruktoriga saate luua ahendamise eksemplari, näiteks:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Sündmused

Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})