firodanan'ny

Ahoana ny fiasan'izany

Ny plugin JavaScript collapse dia ampiasaina hanehoana sy hanafenana votoaty. Ny bokotra na vatofantsika dia ampiasaina ho trigger izay voasoritra amin'ny singa manokana avadikao. Ny fandrotsahana singa iray dia hampihetsika ny heightavy amin'ny sandany ankehitriny ho 0. Raha jerena ny fomba fitantanana ny sary mihetsika dia tsy azonao ampiasaina paddingamin'ny .collapsesinga iray ny CSS. Ampiasao kosa ny kilasy ho singa famonosana mahaleo tena.

OHATRA

Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:

• .collapsemanafina votoaty
• .collapsingdia ampiharina mandritra ny tetezamita
• .collapse.showmampiseho votoaty

Amin'ny ankapobeny, manoro hevitra izahay hampiasa bokotra misy ny data-bs-targettoetra. Na dia tsy soso-kevitra amin'ny fomba fijery semantika aza, dia azonao atao koa ny mampiasa rohy misy ny hreftoetra (sy a role="button"). Amin'ireo tranga roa ireo, data-bs-toggle="collapse"dia ilaina ny.

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

Marindrano

Ny plugin collapse koa dia manohana ny firodanan'ny horizontaly. Ampio ny .collapse-horizontalkilasy modifier hamindrana ny widthfa tsy heightary mametraka a widthamin'ny singa zaza eo no ho eo. Aza misalasala manoratra Sass mahazatra anao manokana, mampiasa fomba an-tserasera, na ampiasao ny fitaovanay malalaka .

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

Tanjona marobe

A <button>na <a>afaka mampiseho sy manafina singa maromaro amin'ny fanondroana azy ireo miaraka amin'ny mpifidy ao amin'ny hreftoetrany data-bs-target. Maro <button>na <a>afaka mampiseho sy manafina singa iray raha samy milaza izany miaraka amin'ny toetrany hrefna ny data-bs-targettoetrany

<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

Ataovy azo antoka ny manampy aria-expandedny singa fanaraha-maso. Ity toetra ity dia mampita mazava ny toetry ny singa mirodana mifatotra amin'ny fanaraha-maso amin'ny mpamaky efijery sy ny teknolojia fanampiana mitovy amin'izany. Raha mihidy amin'ny alàlan'ny default ny singa azo rava, dia tokony hanana sanda aria-expanded="false". Raha toa ianao ka nametraka ny singa azo rava ho misokatra amin'ny alàlan'ny fampiasana ny showkilasy, dia apetraho aria-expanded="true"amin'ny fanaraha-maso kosa. Ny plugin dia hanova ho azy io toetra io amin'ny fanaraha-maso mifototra amin'ny hoe nosokafana na nikatona ilay singa azo rava (tamin'ny alàlan'ny JavaScript, na satria ny mpampiasa dia niteraka singa fanaraha-maso hafa mifamatotra amin'ilay singa azo rava ihany koa). Raha tsy bokotra ny singa HTML an'ny singa fanaraha-maso (ohatra, <a>na <div>), ny toetrarole="button"tokony ampiana amin'ny singa.

Raha mikendry singa tokana azo harodana ny singanao - izany hoe ny data-bs-targettoetra dia manondro idmpifidy - tokony ampidirinao amin'ny aria-controlssinga fanaraha-maso ny toetra, misy ny idsinga azo rava. Ireo mpamaky efijery maoderina sy ireo teknolojia fanampiana mitovy amin'izany dia mampiasa an'io toetra io mba hanomezana ireo mpampiasa hitsin-dàlana fanampiny hivezivezy mivantana mankany amin'ilay singa azo rava.

Mariho fa ny fampiharana an'i Bootstrap amin'izao fotoana izao dia tsy mandrakotra ireo fifandraisana amin'ny klavier isan-karazany voalaza ao amin'ny WAI -ARIA Authoring Practices 1.1 accordion pattern - mila ampidirinao amin'ny JavaScript mahazatra ianao.

Sass

hiovaova

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

fianarana

Ny kilasin'ny tetezamita mirodana dia azo jerena ao scss/_transitions.scsssatria zaraina amin'ny singa maro (firodana sy akorandriaka).

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

Fampiasana

Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:

• .collapsemanafina ny votoatiny
• .collapse.showmampiseho ny votoatiny
• .collapsingampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitra

Ireo kilasy ireo dia azo jerena ao amin'ny _transitions.scss.

Amin'ny alàlan'ny data attributes

Ampio fotsiny data-bs-toggle="collapse"ary a data-bs-targetamin'ilay singa mba hanendry ho azy ny fanaraha-maso ny singa iray na maromaro mirodana. Ny data-bs-targettoetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny show.

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny faritra azo harodana, ampio ny toetran'ny data data-bs-parent="#selector". Jereo ny pejy accordion raha mila fanazavana fanampiny.

Amin'ny JavaScript

Alefa tanana amin'ny:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-, toy ny ao amin'ny data-bs-parent="".

fomba

Manetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

Azonao atao ny mamorona ohatra mirodana miaraka amin'ny mpanamboatra, ohatra:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})