Collapse

Zvinoshanda sei

Iyo yekuputsika JavaScript plugin inoshandiswa kuratidza nekuviga zvirimo. Mabhatani kana zvibatiso zvinoshandiswa sezvinokonzeresa zvakamisikidzwa kune chaiwo zvinhu zvaunoshandura. Kupeta chinhu kuno raramisa heightkubva pakukosha kwayo kuenda ku 0. Tichifunga kuti CSS inobata sei mifananidzo, haugone kushandisa paddingpane .collapsechinhu. Pane kudaro, shandisa kirasi sechinhu chakazvimirira chekuputira chinhu.

Muenzaniso

Dzvanya mabhatani ari pazasi kuratidza uye kuviga chimwe chinhu kuburikidza nekuchinja kwekirasi:

• .collapseanovanza zviri mukati
• .collapsinginoshandiswa panguva yekuchinja
• .collapse.showinoratidza zvirimo

Kazhinji, tinokurudzira kushandisa bhatani rine data-bs-targethunhu. Kunyange zvisingakurudzirwe kubva pakuona semantic, unogona zvakare kushandisa chinongedzo chine hrefhunhu (uye a role="button"). Muzviitiko zvose izvi, data-bs-toggle="collapse"zvinodiwa.

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

Horizontal

Iyo yekudonha plugin zvakare inotsigira yakachinjika kudonha. Wedzera iyo .collapse-horizontalmodifier kirasi kuti uchinje iyo widthpachinzvimbo heightuye isa widthpane yezvino mwana chinhu. Inzwa wakasununguka kunyora yako wega tsika Sass, shandisa inline masitaera, kana kushandisa yedu yehupamhi zvishandiso .

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

Zvinangwa zvakawanda

A <button>kana <a>inogona kuratidza uye kuvanza zvinhu zvakawanda nekuzvirevera neanosarudza mune ayo hrefkana data-bs-targethunhu. Yakawanda <button>kana <a>inogona kuratidza uye kuvanza chinhu kana mumwe nemumwe akachinongedzera nechavo hrefkana data-bs-targethunhu

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

Accessibility

Iva nechokwadi chekuwedzera aria-expandedkune chekutonga chinhu. Uhwu hunhu hunoburitsa zviripachena mamiriro azvino echinhu chinokorokoka chakasungirirwa pakutonga kuvaverengi vezvikirini uye mamwe matekinoroji ekubatsira. Kana iyo chinhu chinoputika chakavharwa nekusagadzika, hunhu huri pane chekutonga hunofanirwa kuve nehukoshi hwe aria-expanded="false". Kana iwe wakaseta chinhu chinoputika kuti chivhurwe nekusarudzika uchishandisa showkirasi, isa aria-expanded="true"pane control pane. Iyo plugin inozochinja otomatiki hunhu uhu pahutongi zvichibva pakuti kana chinhu chinokorokoka chavhurwa kana kuvharwa (kuburikidza neJavaScript, kana nekuti mushandisi akonzeresa chimwe chinhu chekudzora chakasungirirwa kune chimwe chinhu chinoputika). Kana iyo control element's HTML element isiri bhatani (semuenzaniso, an <a>kana <div>), hunhurole="button"inofanira kuwedzerwa kune element.

Kana chinhu chako chekutonga chiri kunanga chinhu chimwe chinoputsika - kureva kuti data-bs-targethunhu huri kunongedza kune imwe idsarudzo - iwe unofanirwa kuwedzera aria-controlshunhu kuchinhu chekutonga, chine idchechinhu chinodonha. Vaverengi vemazuva ano skrini uye matekinoroji ekubatsira akafanana anoshandisa hunhu uhwu kupa vashandisi mamwe mapfupi ekufamba akananga kuchinhu chinoputika pachacho.

Ziva kuti kuita kwazvino kweBootstrap hakuvharidzire mashandisirwo ekiibhodhi akasiyana-siyana anotsanangurwa muARIA Authoring Practices Guide accordion pateni - unozofanirwa kusanganisa iwe pachako neJavaScript.

Sass

Variables

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

Makirasi

Kupunza makirasi eshanduko anogona kuwanikwa mukati scss/_transitions.scsssezvo aya akagovaniswa muzvikamu zvakawanda (kudonha uye 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);
  }
}

Usage

Iyo yekudonha plugin inoshandisa mashoma makirasi kubata inorema kusimudza:

• .collapseinovanza zviri mukati
• .collapse.showinoratidza zviri mukati
• .collapsinginowedzerwa kana shanduko yatanga, uye inobviswa kana yapera

Aya makirasi anogona kuwanikwa mu _transitions.scss.

Via data hunhu

Ingo wedzera data-bs-toggle="collapse"uye a data-bs-targetkune chinhu kuti ugozvigadzike kutonga kwechimwe kana kupfuura chinodonha zvinhu. Hunhu data-bs-targethunogamuchira CSS selector yekushandisa iyo kuputsika. Iva nechokwadi chekuwedzera kirasi collapsekune chinhu chinoputika. Kana uchida kuti risavhurika, wedzera imwe kirasi show.

Kuwedzera accordion-senge boka manejimendi munzvimbo inoputsika, wedzera iyo data hunhu data-bs-parent="#selector". Tarisa kune accordion peji kuti uwane rumwe ruzivo.

Via JavaScript

Vhura nemaoko ne:

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

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

Methods

Activates your content as a collapsible element. Accepts an optional options object.

You can create a collapse instance with the constructor, for example:

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

Events

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