Gu

Sɛnea ɛyɛ adwuma

Collapse JavaScript plugin no na wɔde kyerɛ na wɔde sie nsɛm a ɛwɔ mu. Wɔde bɔton anaa ankora di dwuma sɛ triggers a wɔde map ayɛ nneɛma pɔtee bi a wodannan no. Sɛ wobubu element bi a, ɛbɛma woanya nkwa heightafi ne bo a ɛsom mprempren no so akɔ 0. Sɛ wode sɛnea CSS di animations ho dwuma a, wuntumi mfa nni dwuma paddingwɔ .collapseelement bi so. Mmom no, fa adesuakuw no di dwuma sɛ ade a wɔde kyekyere nneɛma ho a ɛde ne ho.

Nhwɛsoɔ

Klik buttons a ɛwɔ aseɛ ha no so na kyerɛ na fa element foforɔ bi sie denam class nsakraeɛ so:

• .collapsede nsɛm a ɛwɔ mu no sie
• .collapsingwɔde di dwuma wɔ nsakrae ahorow mu
• .collapse.showkyerɛ emu nsɛm

Mpɛn pii no, yɛkamfo kyerɛ sɛ fa bɔtn bi a ɛwɔ data-bs-targetsu no di dwuma. Bere a wɔmfa nkamfo nkyerɛ wɔ nkyerɛase kwan so no, wubetumi nso de link a ɛwɔ hrefsu no (ne a role="button") adi dwuma. Wɔ nsɛm abien no nyinaa mu no, data-bs-toggle="collapse"wɔhwehwɛ sɛ wɔyɛ saa.

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

Ne tɛtrɛtɛ mu

Collapse plugin no nso boa horizontal collapsing. Fa .collapse-horizontalmodifier class no ka ho ma nsakrae no widthmmom heightna hyehyɛ a widthwɔ ntɛm ara abofra element no so. Fa ahofadi kyerɛw w’ankasa Sass a wopɛ, fa inline styles di dwuma, anaa fa yɛn width utilities no di dwuma .

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

Nneɛma pii a wɔde asi wɔn ani so

A <button>anaa <a>betumi akyerɛ na ɔde nneɛma pii asie denam nea ɔde paw nea ɛwɔ ne hrefanaa data-bs-targetsu no mu a ɔde bɛkyerɛkyerɛ mu no so. Multiple <button>anaasɛ <a>wobetumi akyerɛ na wɔde element bi asie sɛ wɔn mu biara de wɔn hrefanaa data-bs-targetattribute kyerɛ no a

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

Nneɛma a wotumi nya

Hwɛ hu sɛ wode bi bɛka aria-expandedcontrol element no ho. Saa su yi da mprempren tebea a ɛwɔ ade a ɛtumi hwe ase a wɔakyekyere no wɔ control no ho no adi pefee ma screen akenkanfo ne mfiridwuma a ɛboa a ɛte saa ara. Sɛ wɔato element a ɛtumi collapsible no mu default so a, ɛsɛ sɛ attribute a ɛwɔ control element no so no nya boɔ a ɛyɛ aria-expanded="false". Sɛ woahyɛ collapsible element no sɛ ɛbɛbue default denam showclass no so a, fa aria-expanded="true"si control no so mmom. Plugin no bɛdannan saa su yi wɔ control no so ankasa a egyina sɛ ebia wɔabue anaasɛ wɔato mu anaasɛ wɔanto mu (ɛnam JavaScript so, anaasɛ esiane sɛ nea ɔde di dwuma no kanyan control element foforo a ɛsan nso kyekyere element koro no ara a wotumi bubu mu no ho). Sɛ control element no HTML element no nyɛ button (sɛ nhwɛso no, an <a>anaa <div>), attribute norole="button"ɛsɛ sɛ wɔde ka element no ho.

Sɛ wo control element no de n’ani si element baako a ɛtumi bu mu – kyerɛ sɛ, data-bs-targetsu no rekyerɛ idselector bi a – ɛsɛ sɛ wode aria-controlsattribute no ka control element no ho, a ɛwɔ idof the collapsible element no mu. Nnɛyi screen akenkanfo ne mfiridwuma a ɛte saa a ɛboa no de saa su yi di dwuma de ma wɔn a wɔde di dwuma no nya akwan tiawa foforo a wɔbɛfa so akɔ element a wotumi bubu no ankasa so tẽẽ.

Hyɛ no nsow sɛ Bootstrap mprempren dwumadie no nkata keyboard nkitahodi ahodoɔ a wobɛpaw a wɔaka ho asɛm wɔ ARIA Authoring Practices Guide accordion pattern no mu - ɛho behia sɛ w'ankasa wode eyinom bɛka JavaScript a wɔahyɛ da ayɛ ho.

Sass

Nneɛma a Ɛsakra

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

Adesua ahorow

Wobetumi ahu collapse nsakrae adesua ahorow wɔ mu scss/_transitions.scsssɛnea eyinom kyɛ wɔ nneɛma pii mu (collapse ne accordion).

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

Sɛnea wɔde di dwuma

Collapse plugin no de adesua kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:

• .collapsede emu nsɛm no sie
• .collapse.showkyerɛ emu nsɛm no
• .collapsingwɔde ka ho bere a nsakrae no afi ase, na woyi fi hɔ bere a awie no

Wobetumi ahu saa adesua ahorow yi wɔ _transitions.scss.

Via data su ahorow so

Kɛkɛ fa data-bs-toggle="collapse"ne a data-bs-targetka element no ho ma automatically assign control of one or more collapsible elements. Attribute no data-bs-targetgye CSS selector a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapseelement a wotumi bu no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho show.

Sɛ wode kuw sohwɛ a ɛte sɛ accordion bɛka beae a wotumi bubu ho a, fa data su no ka ho data-bs-parent="#selector". Hwɛ accordion kratafa no na woanya ho nsɛm pii.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

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

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Akwan a wɔfa so yɛ

Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.

Wubetumi de constructor no ayɛ collapse instance, sɛ nhwɛso no:

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

Nsɛm a esisi

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

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