Ka bin

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.

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.

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

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

<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-di-minɛn 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 fana min 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 de Laɲini min bɛ Se ka Dabɔ – o kɔrɔ ye ko 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-yɔrɔ 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 ARIA Authoring Practices Guide 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.

Donanw ka fɛnɲɛnɛmaw fɛ

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:

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Fɛɛrɛw

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:

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

Ko minnu kɛra

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

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