Tiango

Pehea te mahi

Ka whakamahia te mono JavaScript tiango hei whakaatu me te huna i nga ihirangi. Ka whakamahia nga patene, punga ranei hei keu ka mapi ki nga huānga motuhake ka takahurihia e koe. Ma te tiango i tetahi huānga ka whakakorikori i te heightmai i tona uara o naianei ki 0. Me pehea te whakahaere a CSS i nga pakiwaituhi, kaore e taea e koe te whakamahi paddingi runga i tetahi .collapsehuānga. Engari, whakamahia te akomanga hei huānga takai motuhake.

Tauira

Patohia nga paatene i raro nei hei whakaatu me te huna i tetahi atu huānga ma nga huringa akomanga:

• .collapsehuna ihirangi
• .collapsingka whakamahia i nga wa whakawhiti
• .collapse.showwhakaatu ihirangi

Ko te tikanga, ka tūtohu matou ki te whakamahi i te paatene me te data-bs-targethuanga. Ahakoa kaore i te tūtohutia mai i te tirohanga o te reo, ka taea hoki e koe te whakamahi i te hono me te hrefhuanga (me te role="button"). I roto i nga take e rua, data-bs-toggle="collapse"e hiahiatia ana.

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

Whakapae

Ka tautokohia e te mono tiango te tiango whakapae. Tāpirihia te .collapse-horizontalkaraehe whakakē ki te whakawhiti i te widthhei utu heightme te tautuhi i te widthki runga i te huānga tamaiti tonu. Tena koa ki te tuhi i a koe ake Sass ritenga, whakamahi i nga momo raarangi, whakamahi ranei i a maatau taputapu whanui .

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

Nga whaainga maha

Ka taea e A <button>ranei <a>te whakaatu me te huna i nga huānga maha ma te tohutoro me tetahi kaikowhiri i tona huanga hrefranei . data-bs-targetHe maha , ka taea <button>ranei <a>te whakaatu me te huna i tetahi huānga mena ka tohua e ia me o hrefraatau data-bs-targethuanga

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

Te urunga

Me tino taapiri atu aria-expandedki te huānga mana. Ko tenei huanga e whakaatu marama ana i te ahuatanga o naianei o te huānga tiango e herea ana ki te mana ki nga kaipanui mata me nga hangarau awhina rite. Mena kua katia te huānga tiango ma te taunoa, me whai uara o te huanga o te huānga mana aria-expanded="false". Mena kua tautuhia e koe te huānga tiango kia tuwhera ma te taunoa ma te whakamahi i te showkaraehe, tohua aria-expanded="true"ki te mana. Ka takahuri aunoa te mono i tenei huanga i runga i te mana i runga i te mea kua whakatuwherahia, kua kati ranei te huānga tiango (ma te JavaScript, na te mea i whakaoho te kaiwhakamahi i tetahi atu huānga mana e herea ana ki taua huānga tiango). Mena ko te huānga HTML o te mana whakahaere ehara i te paatene (hei tauira, he <a>ranei <div>), te huangarole="button"me taapiri atu ki te huānga.

Mēnā e aro ana tō huānga mana ki tētahi huānga tiango kotahi – arā data-bs-target, e tohu ana te huanga ki tētahi idkaikōwhiri – me tāpiri koe i te aria-controlshuanga ki te huānga mana, kei roto te ido te huānga tiango. Ka whakamahia e nga kaipanui mata hou me nga hangarau awhina rite tenei huanga ki te whakarato ki nga kaiwhakamahi etahi atu pokatata ki te whakatere tika ki te huānga tiango ake.

Kia mahara ko te whakatinanatanga o naianei a Bootstrap kaore e kapi i nga momo taunekeneke papapātuhi kua tohua i roto i te tauira akoriona Aratohu Arahi Kaituhi ARIA - me whakauru e koe enei ki te JavaScript ritenga.

Sass

Taurangi

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

Karaehe

Ka kitea nga karaehe whakawhiti tiango i te scss/_transitions.scssmea ka tohatohahia enei ki nga waahanga maha (te tiango me te 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);
  }
}

Whakamahinga

Ka whakamahia e te mono tiango etahi karaehe hei hapai i te hiki taumaha:

• .collapseka huna i te ihirangi
• .collapse.showwhakaatu te ihirangi
• .collapsingka taapirihia ina timata te whakawhiti, ka tangohia ina mutu

Ka kitea enei akomanga i roto i _transitions.scss.

Ma nga huanga raraunga

Taapiri noa data-bs-toggle="collapse"me te data-bs-targeta ki te huānga hei tautapa aunoa i te mana o tetahi, neke atu ranei nga huānga tiango. Ka data-bs-targetwhakaaetia e te huanga he kaikowhiri CSS hei hoatu i te tiango ki. Me tino taapiri te karaehe collapseki te huānga tiango. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri show.

Hei taapiri i te whakahaere roopu rite-akordion ki tetahi waahi tiango, taapirihia te huanga raraunga data-bs-parent="#selector". Tirohia te wharangi accordion mo etahi atu korero.

Ma te JavaScript

Whakahohe ā-ringa ki:

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

Kōwhiringa

I te mea ka tukuna nga whiringa ma nga huanga raraunga, JavaScript ranei, ka taea e koe te taapiri i tetahi ingoa whiringa ki data-bs-, penei i te data-bs-animation="{value}". Kia mohio koe ki te whakarereke i te momo keehi o te ingoa whiringa mai i te " CamelCase " ki te " kebab-case " ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, whakamahia data-bs-custom-class="beautifier"hei utu mo data-bs-customClass="beautifier".

Mai i te Bootstrap 5.2.0, ka tautoko nga waahanga katoa i tetahi huanga raraunga kua rahuitia hei whakamatautaudata-bs-config ka taea te whakanoho i te whirihoranga waahanga ngawari hei aho JSON. Ina he huānga data-bs-config='{"delay":0, "title":123}'me data-bs-title="456"nga huanga, ko te titleuara whakamutunga 456ko nga huanga raraunga motuhake ka takahia nga uara kua hoatu ki runga data-bs-config. I tua atu, ka taea e nga huanga raraunga o mua te whakanoho i nga uara JSON penei i te data-bs-delay='{"show":0,"hide":150}'.

Nga tikanga

Ka whakahohe i to ihirangi hei huānga tiango. Ka whakaae ki nga whiringa whiriwhiri object.

Ka taea e koe te hanga tauira tiango me te kaihanga, hei tauira:

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

Nga huihuinga

Ko te karaehe tiango a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi tiango.

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