Sakļaut

Kā tas strādā

Sakļautais JavaScript spraudnis tiek izmantots, lai rādītu un paslēptu saturu. Pogas vai enkuri tiek izmantoti kā aktivizētāji, kas ir saistīti ar konkrētiem elementiem, kurus pārslēdzat. Sakļaujot elementu, heighttā pašreizējā vērtība tiks animēta uz 0. Ņemot vērā to, kā CSS apstrādā animācijas, to nevar izmantot paddingelementam .collapse. Tā vietā izmantojiet klasi kā neatkarīgu iesaiņojuma elementu.

Piemērs

Noklikšķiniet uz tālāk esošajām pogām, lai parādītu un paslēptu citu elementu, veicot klases izmaiņas:

• .collapseslēpj saturu
• .collapsingtiek izmantots pāreju laikā
• .collapse.showparāda saturu

Parasti mēs iesakām izmantot pogu ar data-bs-targetatribūtu. Lai gan no semantiskā viedokļa tas nav ieteicams, varat izmantot arī saiti ar hrefatribūtu (un role="button"). Abos gadījumos data-bs-toggle="collapse"ir nepieciešams.

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

Horizontāli

Sakļaušanas spraudnis atbalsta arī horizontālo sabrukšanu. Pievienojiet .collapse-horizontalmodifikatora klasi, lai pārietu uz widthtā vietā, heightun iestatiet a widthtiešajam bērna elementam. Jūtieties brīvi rakstīt savu pielāgoto Sass, izmantojiet iekļautos stilus vai izmantojiet mūsu platuma utilītas .

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

Vairāki mērķi

A <button>vai <a>var parādīt un paslēpt vairākus elementus, atsaucoties uz tiem ar atlasītāju savā hrefvai data-bs-targetatribūtā. Vairāki <button>vai <a>var parādīt un paslēpt elementu, ja katrs uz to atsaucas ar savu hrefvai data-bs-targetatribūtu

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

Pieejamība

Noteikti pievienojiet aria-expandedvadības elementu. Šis atribūts skaidri norāda uz ekrāna lasītājiem un līdzīgām palīgtehnoloģijām ar vadīklu saistītā saliekamā elementa pašreizējo stāvokli. Ja saliekamais elements ir aizvērts pēc noklusējuma, vadības elementa atribūta vērtībai ir jābūt aria-expanded="false". showJa, izmantojot klasi, pēc noklusējuma esat iestatījis saliekamo elementu atvērtu, aria-expanded="true"tā vietā iestatiet vadīklu. Spraudnis automātiski pārslēgs šo atribūtu vadīklā, pamatojoties uz to, vai sakļaujamais elements ir atvērts vai aizvērts (izmantojot JavaScript vai tāpēc, ka lietotājs aktivizēja citu vadības elementu, kas arī ir saistīts ar to pašu saliekamo elementu). Ja vadības elementa HTML elements nav poga (piemēram, <a>vai <div>), atribūtsrole="button"jāpievieno elementam.

Ja jūsu vadības elements ir vērsts uz vienu saliekamo elementu, ti, data-bs-targetatribūts norāda uz idatlasītāju, jums jāpievieno aria-controlsatribūts vadības elementam, kas satur idsaliekamā elementa elementu. Mūsdienu ekrāna lasītāji un līdzīgas palīgtehnoloģijas izmanto šo atribūtu, lai nodrošinātu lietotājiem papildu īsceļus, kas ļauj pāriet tieši uz saliekamo elementu.

Ņemiet vērā, ka Bootstrap pašreizējā ieviešana neaptver dažādas izvēles tastatūras mijiedarbības, kas aprakstītas ARIA autorēšanas prakses rokasgrāmatas akordeona shēmā — tās jums pašam būs jāiekļauj pielāgotajā JavaScript.

Sass

Mainīgie

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

Klases

Sakļaut pārejas klases var atrast, scss/_transitions.scssjo tās ir kopīgas vairākiem komponentiem (sabrukums un akordeons).

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

Lietošana

Sakšanas spraudnis izmanto dažas klases, lai apstrādātu smagumu:

• .collapseslēpj saturu
• .collapse.showparāda saturu
• .collapsingtiek pievienots, kad sākas pāreja, un noņemts, kad tā beidzas

Šīs nodarbības var atrast _transitions.scss.

Izmantojot datu atribūtus

Vienkārši pievienojiet elementam data-bs-toggle="collapse"un a data-bs-target, lai automātiski piešķirtu viena vai vairāku saliekamo elementu vadību. Atribūts data-bs-targetakceptē CSS atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi show.

Lai saliekamam apgabalam pievienotu akordeonam līdzīgu grupu pārvaldību, pievienojiet datu atribūtu data-bs-parent="#selector". Plašāku informāciju skatiet akordeona lapā .

Izmantojot JavaScript

Iespējot manuāli, izmantojot:

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

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Metodes

Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object.

Varat izveidot sakukšanas gadījumu, izmantojot konstruktoru, piemēram:

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

Pasākumi

Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.

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