Ynsakje

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 heightfan syn hjoeddeistige wearde nei 0. Sjoen hoe't CSS animaasjes omgiet, kinne jo net brûke paddingop in .collapseelemint. Brûk ynstee de klasse as in ûnôfhinklik wrappingselemint.

Foarbyld

Klikje op de knoppen hjirûnder om in oar elemint te sjen en te ferbergjen fia klassewizigingen:

• .collapseferberget ynhâld
• .collapsingwurdt tapast by oergongen
• .collapse.showtoant ynhâld

Yn 't algemien riede wy oan om in knop te brûken mei it data-bs-targetattribút. Hoewol net oanrikkemandearre út in semantysk eachpunt, kinne jo ek in keppeling brûke mei it hrefattribú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-horizontalmodifier klasse ta oergong de widthynstee fan heighten set in widthop 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 .

<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 hrefof data-bs-targetattribút. Meardere <button>of <a>kin in elemint sjen en ferbergje as se elk ferwize mei har hrefof data-bs-targetattribú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-expandedoan 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 showklasse, 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-targetattribút wiist nei in idselector - Jo moatte tafoegje it aria-controlsattribút oan it kontrôle elemint, mei dêryn de idfan 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 beskreaun yn 'e ARIA Authoring Practices Guide akkordeonpatroan - jo moatte dizze sels opnimme mei oanpaste 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.scssas 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:

• .collapseferberget de ynhâld
• .collapse.showtoant de ynhâld
• .collapsingwurdt 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-targetoan it elemint ta om automatysk kontrôle fan ien of mear ynklapbere eleminten ta te jaan. It data-bs-targetattribút akseptearret in CSS-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan 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:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Metoaden

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

Jo kinne in ynklapeksimplaar meitsje mei de konstruktor, bygelyks:

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

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

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