Kokwea

Ndenge oyo esalaka

Plugin ya JavaScript ya kokweya esalelamaka mpo na kolakisa mpe kobomba makambo oyo ezali na kati. Ba boutons to ba ancres esalelamaka lokola ba déclencheur oyo e mapé na ba éléments spécifiques oyo o toggler. Ko collapser élément moko eko animer la heightdepuis valeur na yango ya lelo na 0. Soki totali ndenge CSS esimbaka ba animations, okoki te kosalela paddingna .collapseélément moko. Na esika ya kosala bongo, salelá kelasi lokola eloko ya kokanga oyo ezali na boyokani te.

Ndakisa

Finá na ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eloko mosusu na nzela ya mbongwana ya kelasi:

• .collapseebombaka makambo oyo ezali na kati
• .collapsingesalelamaka na ntango ya mbongwana
• .collapse.showelakisaka makambo oyo ezali na kati

En général, tosengi kosalela bouton oyo ezali na data-bs-targetattribut. Atako esengami te na point de vue sémantique, okoki mpe kosalela lien na hrefattribut (mpe a role="button"). Na makambo nyonso mibale, data-bs-toggle="collapse"esɛngami.

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

Ya kolala

Plugin ya collapse esalisaka pe collapse horizontale. Bakisa .collapse-horizontalkelasi ya modificateur mpo na kosala transition ya na widthesika ya heightmpe kotya a widthna élément ya mwana ya mbala moko. Bozala na bonsomi ya kokoma Sass na bino moko oyo olingi, kosalela ba styles ya inline, to kosalela ba utilitaires na biso ya largeur .

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

Ba cibles ebele

A <button>to <a>ekoki kolakisa mpe kobomba ba éléments ebele na kosala référence na yango na selecteur na attribut na yango hrefto . data-bs-targetMultiple <button>to <a>bakoki kolakisa mpe kobomba élément moko soki bango moko na moko azali kosala référence na yango na attribut na bango hreftodata-bs-target

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

Kozala na makoki ya kozwa yango

Bozala sûr ya kobakisa aria-expandedna élément ya contrôle. Attribut oyo ezo transmettre explicitement état actuel ya élément collapsible lié na contrôle na ba lecteurs d'écran na ba technologies d'assistance ya ndenge wana. Soki élément collapsible ekangami na ndenge ya défaut, attribut na élément ya contrôle esengeli kozala na valeur ya aria-expanded="false". Soki otie élément collapsible ezala ouvert par défaut kosalela showclasse, tia aria-expanded="true"na contrôle na esika na yango. Plugin eko changer automatiquement attribut oyo na contrôle selon soki to te élément collapsible efungolami to ekangami (na nzela ya JavaScript, to mpo mosaleli a déclenché élément mosusu ya contrôle mpe ekangami na même élément collapsible). Soki élément HTML ya élément ya contrôle ezali bouton te (ndakisa, an <a>to <div>), attributrole="button"esengeli kobakisa yango na elemande yango.

Soki élément ya contrôle na yo ezali ko cibler élément moko collapsible – c’est-à-dire data-bs-targetattribut ezali ko pointer idsélecteur moko – esengeli obakisa aria-controlsattribut na élément de contrôle, oyo ezali na idya élément collapsible. Ba lecteurs d’écran ya mikolo oyo mpe ba technologies ya assistance ya ndenge wana esalelaka attribut oyo mpo na kopesa ba usagers ba raccourcis ya kobakisa mpo na ko naviguer directement na élément collapsible yango moko.

Yeba ete bosaleli ya Bootstrap ya lelo etali te ba interactions ndenge na ndenge ya clavier optionnel oyo elimbolami na modèle ya accordéon ya ARIA Authoring Practices Guide - ekosenga otia yo moko oyo na JavaScript personnalisé.

Sass oyo azali

Ba variables oyo ezali

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

Bakelasi

Ba classes ya transition ya collapse ekoki kozwama na scss/_transitions.scsslokola oyo ekabolami na kati ya ba composants ebele (collapse na accordéon).

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

Kosalela yango

Plugin ya collapse esalelaka mua ba classes pona ko gérer levage ya kilo:

• .collapseebombaka makambo oyo ezali na kati
• .collapse.showelakisaka makambo oyo ezali na kati
• .collapsingebakisami ntango mbongwana ebandi, mpe elongolami ntango esili

Bakelasi yango ekoki kozwama na _transitions.scss.

Na nzela ya ba attributs ya ba données

Bobakisa kaka data-bs-toggle="collapse"mpe a data-bs-targetna élément mpo na ko assigner automatiquement contrôle ya élément moko to ebele oyo ekoki ko collapsible. Attribut data-bs-targetendimi moponi ya CSS mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapsena élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa show.

Mpo na kobakisa boyangeli ya etuluku lokola accordéon na esika oyo ekoki kokangama, bakisa attribut ya ba données data-bs-parent="#selector". Talá lokasa ya accordéon mpo na koyeba makambo mosusu.

Na nzela ya JavaScript

Activer manuellement na:

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

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Ba méthodes ya kosala

Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object.

Okoki kosala instance ya collapse na constructeur, ndakisa:

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

Makambo oyo esalemaki

Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.

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