Kunja

Inavyofanya kazi

Kunja JavaScript programu-jalizi hutumika kuonyesha na kuficha maudhui. Vifungo au nanga hutumiwa kama vichochezi ambavyo vimepangwa kwa vipengele maalum unavyogeuza. Kukunja kipengele kutahuisha heightkutoka kwa thamani yake ya sasa hadi 0. Kwa kuzingatia jinsi CSS inavyoshughulikia uhuishaji, huwezi kutumia paddingkwenye .collapsekipengee. Badala yake, tumia darasa kama nyenzo huru ya kufunga.

Mfano

Bofya vitufe vilivyo hapa chini ili kuonyesha na kuficha kipengele kingine kupitia mabadiliko ya darasa:

• .collapsehuficha yaliyomo
• .collapsinginatumika wakati wa mabadiliko
• .collapse.showinaonyesha maudhui

Kwa ujumla, tunapendekeza kutumia kifungo na data-bs-targetsifa. Ingawa haipendekezwi kutoka kwa mtazamo wa kisemantiki, unaweza pia kutumia kiunga kilicho na hrefsifa (na role="button"). Katika visa vyote viwili, data-bs-toggle="collapse"inahitajika.

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

Mlalo

Programu-jalizi ya kukunja pia inasaidia kukunja kwa mlalo. Ongeza .collapse-horizontaldarasa la kirekebishaji ili kubadilisha widthbadala ya heightna uweke widthkwenye kipengele cha mtoto. Jisikie huru kuandika Sass yako maalum, tumia mitindo ya ndani, au tumia huduma zetu za upana .

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

Malengo mengi

A <button>au <a>inaweza kuonyesha na kuficha vipengele vingi kwa kuvirejelea na kiteuzi ndani yake hrefau data-bs-targetsifa. Nyingi <button>au <a>zinaweza kuonyesha na kuficha kipengele ikiwa kila kimoja kinarejelea na wao hrefau data-bs-targetsifa

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

Ufikivu

Hakikisha kuongeza aria-expandedkwenye kipengele cha kudhibiti. Sifa hii inaonyesha kwa uwazi hali ya sasa ya kipengele kinachoweza kukunjwa kilichounganishwa na udhibiti kwa visoma skrini na teknolojia saidizi sawa. Ikiwa kipengele kinachoweza kukunjwa kimefungwa kwa chaguo-msingi, sifa kwenye kipengele cha kudhibiti inapaswa kuwa na thamani ya aria-expanded="false". Ikiwa umeweka kipengee kinachoweza kukunjwa kufunguka kwa chaguomsingi kwa kutumia showdarasa, aria-expanded="true"badala yake weka kidhibiti. Programu-jalizi itageuza kiotomatiki sifa hii kwenye kidhibiti kulingana na ikiwa kipengele kinachoweza kukunjwa kimefunguliwa au hakijafungwa (kupitia JavaScript, au kwa sababu mtumiaji alianzisha kipengele kingine cha udhibiti ambacho kimefungwa kwa kipengele kile kile kinachoweza kukunjwa). Ikiwa kipengele cha HTML cha kipengele cha kudhibiti si kitufe (kwa mfano, a <a>au <div>), sifarole="button"inapaswa kuongezwa kwa kipengele.

Ikiwa kipengele chako cha kudhibiti kinalenga kipengele kimoja kinachoweza kukunjwa - yaani data-bs-targetsifa inaelekeza kwenye idkiteuzi - unapaswa kuongeza aria-controlssifa kwenye kipengele cha udhibiti, kilicho na idkipengele kinachoweza kukunjwa. Visomaji skrini vya kisasa na teknolojia zinazofanana na usaidizi hutumia sifa hii kuwapa watumiaji njia za mkato za ziada za kusogeza moja kwa moja hadi kwenye kipengele chenyewe kinachoweza kukunjwa.

Kumbuka kuwa utekelezaji wa sasa wa Bootstrap haujumuishi mwingiliano mbalimbali wa hiari wa kibodi uliofafanuliwa katika muundo wa mfuatano wa Mwongozo wa Mazoezi ya Uandishi wa ARIA - utahitaji kujumuisha haya mwenyewe kwenye JavaScript maalum.

Sass

Vigezo

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

Madarasa

Kunja madarasa ya mpito yanaweza kupatikana kwa scss/_transitions.scsskuwa haya yanashirikiwa katika vipengee vingi (kukunja na 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);
  }
}

Matumizi

Programu-jalizi ya kukunja hutumia madarasa machache kushughulikia unyanyuaji mzito:

• .collapsehuficha yaliyomo
• .collapse.showinaonyesha yaliyomo
• .collapsinghuongezwa wakati mpito unapoanza, na kuondolewa ukikamilika

Madarasa haya yanaweza kupatikana katika _transitions.scss.

Kupitia sifa za data

Ongeza tu data-bs-toggle="collapse"na a data-bs-targetkwa kipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kimoja au zaidi zinazoweza kukunjwa. Sifa data-bs-targetinakubali kiteuzi cha CSS cha kutumia kukunja kwake. Hakikisha umeongeza darasa collapsekwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada show.

Ili kuongeza usimamizi wa kikundi kama accordion kwenye eneo linalokunjwa, ongeza sifa ya data data-bs-parent="#selector". Rejelea ukurasa wa accordion kwa habari zaidi.

Kupitia JavaScript

Washa wewe mwenyewe na:

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

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Mbinu

Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object.

Unaweza kuunda mfano wa kuanguka na mjenzi, kwa mfano:

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

Matukio

Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.

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