Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Ka bin

Kɔnɔkow yecogo caman wuli i ka porozɛ kɔnɔ ni kalan damadɔw ye ani an ka JavaScript fɛnw.

A bɛ baara kɛ cogo min na

JavaScript plugin min bɛ wele ko collapse, o bɛ kɛ ka kɔnɔkow jira ani k’u dogo. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ fɛnɲɛnɛmaw minnu bɛ karti Kɛ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle. Ni fɛn dɔ binna , o bɛna ɲɛnamaya di ka heightbɔ a nafa la sisan ka se 0. Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara paddingkɛ ni .collapseelement dɔ ye. O nɔ na, ​​baara kɛ ni kalasi ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Misaliya

Butɔn minnu bɛ duguma, olu digi walasa ka fɛn wɛrɛ jira ani k’a dogo kalanso caman yeli fɛ:

  • .collapsekɔnɔkow bɛ dogo
  • .collapsingbɛ waleya fɛn caman tigɛli waatiw la
  • .collapse.showbɛ kɔnɔkow jira

A ka c’a la, an b’a ɲini aw fɛ aw ka baara kɛ ni butɔni ye min bɛ ni fɛn data-bs-targetye. Hali n’a ma Fɔ kɔrɔko siratigɛ la, i bɛ Se fana ka baara Kɛ ni jὲɲɔgɔnya ye ni ‘fɛn hrefye (ani a role="button"). O ko fila bɛɛ la, a data-bs-toggle="collapse"wajibiyalen don.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Dalen

Collapse plugin fana bɛ collapse horizontale dɛmɛ. A bɛ .collapse-horizontalmodifier class fara a kan ka transition the widthinstead of heightani ka a sigi widthteliya den element kan. Aw kana siga ka aw yɛrɛ ka Sass ladamu sɛbɛn, ka baara kɛ ni inline styles ye, walima ka baara kɛ ni an ka width utilities ye .

Aw k’a dɔn ko hali ni misali min bɛ duguma, o bɛ ni min-heightseti ye walasa ka an yɛrɛ tanga penti caman kɛli ma an ka sɛbɛnw kɔnɔ, o tɛ wajibiya k’a jɛya. On widththe child element dɔrɔn de wajibiyalen don.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

Laɲini caman

A <button>walima <a>bɛ se ka fɛn caman jira ani k’u dogo ni u ɲɛfɔli ye ni sugandilikɛlan ye a hrefwalima a ka data-bs-targetfɛnsɛbɛnni na. Multiple <button>walima <a>ka se ka fɛn dɔ jira ani k’a dogo n’u kelen-kelen bɛɛ y’a Lajɛ n’u ka hrefwalima data-bs-targetattribut ye

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

Seko ni dɔnko

Aw ye aw jija ka dɔ fara aria-expandeda kunbɛncogo kan. O jogo in bɛ fɛn min bɛ se ka bin, o min sirilen bɛ kunnafoni-falen-falen na, o cogoya jira k’a jɛya ka ɲɛsin ɛkran kalanbagaw ma ani o ɲɔgɔnna dɛmɛni fɛɛrɛw. Ni fɛn min bɛ se ka da ɲɔgɔn kan, o datugulen don ka kɛɲɛ ni a daminɛ ye, fɛn min bɛ kunnafonisɛbɛn kan, o ka kan ka kɛ ni nafa ye aria-expanded="false". N'i ye 'fɛn min bɛ Se ka Dabɔ, o Dabɔ ka Dabɔ ka Kɛɲɛ ni showkalasi ye, i bɛ Segin aria-expanded="true"'kɔnɔna na o nɔ na. Plugin bɛna o fɛn in Yɛlɛma a yɛrɛma kɔrɔsili kan ka da a kan ni fɛn min bɛ Se ka Dabɔ o dabɔra walima n’a Dabɔra (JavaScript fɛ, walima k’a sababu Kɛ baarakɛla ye kunnafoni-falen-falen wɛrɛ Lawuli min fana sirilen bɛ o fɛn kelen in na). Ni control element ka HTML element tɛ butɔni ye (misali la, an <a>walima <div>), attributrole="button"ka kan ka fara elementi kan.

Ni i ka kunnafoni-falen-falen-yɔrɔ bɛ ka fɛn kelen laɲini min bɛ Se ka Dabɔ – n’o ye data-bs-targetfɛnɲɛnɛma bɛ ka idsugandilikɛla dɔ Jira – i ka kan ka aria-controlsfɛnɲɛnɛma Fàra kunnafoni-falen-falen-fɛn kan, min kɔnɔ fɛn min bɛ idSe ka Dabɔ. Bi ɛkran kalanbagaw ni o ɲɔgɔnna dɛmɛnanw bɛ baara kɛ ni o fɛn in ye walasa ka sira surun wɛrɛw di baarakɛlaw ma walasa u ka se ka taa yɔrɔ la min bɛ se ka dabɔ a yɛrɛ la.

A kɔlɔsi ko Bootstrap ka sisan waleyali tɛ klaviyeti ɲɔgɔndan suguya caman ɲɛfɔ minnu ɲɛfɔlen don WAI-ARIA Authoring Practices 1.1 accordion pattern kɔnɔ - i yɛrɛ bɛna a ɲini ka ninnu don a kɔnɔ ni JavaScript ladamulen ye.

Sass ye

Yɛlɛma-yɛlɛmaw

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

Kalansow

Collapse transition classes bɛ Se ka Sɔrɔ in na scss/_transitions.scssi n’a fɔ ninnu bɛ Jɛ ka Kɛ fɛn caman ye (collapse ani accordéon).

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

Baarakɛcogo

Collapse plugin bɛ baara Kɛ ni kala damadɔ ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

  • .collapsebɛ kɔnɔkow dogo
  • .collapse.showbɛ kɔnɔkow jira
  • .collapsingbɛ fara a kan ni tɛmɛsira daminɛna, ka bɔ ni a banna

O kalanw bɛ se ka sɔrɔ _transitions.scss.

Ka tɛmɛn donanw ka fɛnw kan

Dɔrɔn ka fara data-bs-toggle="collapse"ani a data-bs-targetkan fɛn in na walasa ka fɛn kelen walima fɛn caman minnu bɛ se ka da ɲɔgɔn kan, olu ka kɔrɔsili di otomatiki la. Attribut data-bs-targetbɛ sɔn CSS sugandili ma walasa ka collapse (dakun) in waleya. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.

Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ accordion fara a kan yɔrɔ la min bɛ se ka da, i ka data attribute fara a kan data-bs-parent="#selector". Aw ye accordéon ɲɛ lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-parent="".

Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
parent sugandilikɛla | jQuery fɛn | DOM yɔrɔ false Ni bangebaga dira, o tuma na, fɛn minnu bɛ se ka dabɔ bangebaga kofɔlen jukɔrɔ, olu bɛɛ bɛna datugu ni nin fɛn min bɛ se ka da ɲɔgɔn kan, o jirala. (a bɛ tali kɛ laadala acordion kɛcogo la - o bɛ bɔ cardkalasi de la). Attribut ka kan ka sigi laɲini collapsible yɔrɔ kan.
toggle boolean ye true A bɛ fɛn min bɛ Se ka Dabɔ, o bɛ Yɛlɛma weleli kan

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

Aw bɛ se ka collapse instance dɔ Dabɔ ni constructeur ye, misali la:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Kɛcogo Cogojirali
toggle A bɛ fɛn dɔ wuli ka bɔ a nɔ na ka taa jira walima ka dogo. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.collapsewalima hidden.bs.collapseko kɛlen ka Kɛ).
show A bɛ fɛn dɔ jira min bɛ se ka wuli. A bɛ segin welebaga ma sanni fɛn min bɛ se ka da ɲɔgɔn kan, o ka jira tiɲɛ na (misali la, sanni ko shown.bs.collapsekɛlen ka kɛ).
hide A bɛ fɛn dɔ dogo min bɛ Se ka Dabɔ. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka dogo tiɲɛ na (misali la, sani ko hidden.bs.collapsein ka Kɛ).
dispose A bɛ fɛn dɔ ka binkanni tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Fɛɛrɛ jɔlen min b’a To i bɛ se ka collapse instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, i bɛ Se ka baara Kɛ n’a ye nin cogo in na:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Static method min bɛ collapse instance segin min bɛ tali kɛ DOM element dɔ la walima ka kura da n’a sɔrɔla a ma daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la:bootstrap.Collapse.getOrCreateInstance(element)

Ko minnu kɛra

Bootstrap ka collapse class bɛ ko damadɔw bɔ kɛnɛ kan ka ɲɛsin hooking into collapse functionality ma.

Ko kɛlen suguya Cogojirali
show.bs.collapse O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelera.
shown.bs.collapse O ko in bɛ Fɔ ni fɛn dɔ Dònna 'kɔnɔ min bɛ Se ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
hide.bs.collapse O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidefɛɛrɛ Weelera.
hidden.bs.collapse O ko in bɛ Fɔ ni fɛn dɔ dogolen dòn baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})