Kugwa

Momwe zimagwirira ntchito

Pulogalamu yowonjezera ya JavaScript imagwiritsidwa ntchito kusonyeza ndi kubisa zomwe zili. Mabatani kapena anangula amagwiritsidwa ntchito ngati zoyambitsa zomwe zimajambulidwa kuzinthu zinazake zomwe mumasintha. Kugwetsa chinthu kumapangitsa kuti chinthucho heightchichoke pamtengo wake wapano mpaka 0. Poganizira momwe CSS imagwirira ntchito makanema ojambula, simungagwiritse ntchito paddingpa .collapsechinthu. M'malo mwake, gwiritsani ntchito kalasi ngati chinthu chodzikulunga chodziyimira payokha.

Chitsanzo

Dinani mabatani omwe ali pansipa kuti muwonetse ndikubisa chinthu china kudzera mukusintha kwamakalasi:

• .collapseamabisa zomwe zili
• .collapsingimagwiritsidwa ntchito panthawi ya kusintha
• .collapse.showzikuwonetsa zomwe zili

Nthawi zambiri, timalimbikitsa kugwiritsa ntchito batani lokhala ndi mawonekedwe data-bs-target. Ngakhale osavomerezeka kuchokera kumalingaliro a semantic, mutha kugwiritsanso ntchito ulalo wokhala ndi hrefmalingaliro (ndi a role="button"). Muzochitika zonsezi, data-bs-toggle="collapse"ndikofunikira.

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

Chopingasa

Pulagi ya kugwa imathandiziranso kugwa kopingasa. Onjezani .collapse-horizontalkalasi yosinthira kuti musinthe widthm'malo mwake heightndikuyika widthpa chinthu chomwe chilipo mwana. Khalani omasuka kulemba makonda anu a Sass, gwiritsani ntchito masitayelo apaintaneti, kapena gwiritsani ntchito zida zathu zakufalikira .

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

Zolinga zingapo

A <button>kapena <a>atha kuwonetsa ndikubisa zinthu zingapo pozilozera ndi chosankha hrefkapena mawonekedwe ake data-bs-target. Angapo <button>kapena atha kuwonetsa <a>ndikubisa chinthu ngati aliyense amachitchula ndi mawonekedwe hrefakedata-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>

Kufikika

Onetsetsani kuti muwonjezere aria-expandedku chinthu chowongolera. Izi zikuwonetsa bwino momwe zinthu zomwe zimasokonekera zomwe zimalumikizidwa ndi zowongolera zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngati chinthu chosokonekera chatsekedwa mwachisawawa, mawonekedwe omwe ali pagawo lowongolera ayenera kukhala ndi mtengo wa aria-expanded="false". Ngati mwakhazikitsa chinthu chogonja kuti chitsegulidwe mwachisawawa pogwiritsa ntchito showkalasi, ikani aria-expanded="true"pazowongolera m'malo mwake. Pulagiyi imangosintha izi pakuwongolera kutengera ngati chinthu chomwe chitha kugubuduka chatsegulidwa kapena kutsekedwa (kudzera pa JavaScript, kapena chifukwa wogwiritsa ntchitoyo adayambitsa chinthu china chowongolera chomwe chimamangiriridwanso ku chinthu chomwe chimatha). Ngati chinthu chowongolera cha HTML si batani (mwachitsanzo, <a>kapena <div>), mawonekedwerole="button"ziyenera kuwonjezeredwa ku element.

Ngati chinthu chomwe mumayang'anira chikuyang'ana chinthu chimodzi chomwe chimatha kugwa - mwachitsanzo, mawonekedwewo data-bs-targetakulozera kwa idchosankha - muyenera kuwonjezera chizindikiritso aria-controlsku chinthu chowongolera, chomwe chili ndi idchinthu chomwe chimatha kugwa. Owerenga zenera amakono ndi matekinoloje othandizira ofanana amagwiritsa ntchito izi kuti apatse ogwiritsa ntchito njira zazifupi kuti ayende molunjika ku chinthu chomwe chimasokonekera chokha.

Dziwani kuti kukhazikitsidwa kwa Bootstrap pakadali pano sikukhudza machitidwe osiyanasiyana a kiyibodi omwe akufotokozedwa mu ARIA Authoring Practices Guide accordion pattern - muyenera kuziphatikiza nokha ndi JavaScript.

Sass

Zosintha

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

Maphunziro

Makalasi osinthika atha kupezeka scss/_transitions.scsschifukwa amagawidwa m'magawo angapo (kugwa ndi 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);
  }
}

Kugwiritsa ntchito

Pulagi yakugwa imagwiritsa ntchito makalasi angapo kuti athetse kukweza kolemera:

• .collapseamabisa zomwe zili
• .collapse.showzikuwonetsa zomwe zili
• .collapsingimawonjezeredwa pamene kusintha kukuyamba, ndikuchotsedwa ikatha

Maphunzirowa amapezeka mu _transitions.scss.

Kudzera muzochita za data

Ingowonjezerani data-bs-toggle="collapse"ndi a data-bs-targetku chinthucho kuti muzipereka chiwongolero cha chinthu chimodzi kapena zingapo zomwe zimatha kutha. Malingaliro data-bs-targetamavomereza chosankha cha CSS kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapseku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera show.

Kuti muwonjeze kasamalidwe ka gulu ngati accordion kumalo otha kugwa, onjezani mawonekedwe a data data-bs-parent="#selector". Onani tsamba la accordion kuti mudziwe zambiri.

Kudzera pa JavaScript

Yambitsani pamanja ndi:

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

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Njira

Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object.

Mutha kupanga chiwonetsero chakugwa ndi womanga, mwachitsanzo:

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

Zochitika

Gulu la kugwa la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi kugwa.

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