شکست هێنان

چۆن کاردەکات

پێوەکراوەکەی جاڤاسکڕێپتی داڕمان بەکاردێت بۆ پیشاندانی و شاردنەوەی ناوەڕۆک. دوگمەکان یان ئەنکرەکان وەکو تریگەر بەکاردەهێنرێن کە نەخشەیان بۆ دانراوە بۆ توخمە تایبەتەکان کە تۆ دەیگۆڕیت. داڕمانی توخمێک heightلە بەهای ئێستایەوە بۆ 0. بە سەرنجدان بەوەی چۆن CSS مامەڵە لەگەڵ ئەنیمەیشنەکان دەکات، ناتوانیت paddingلەسەر .collapseتوخمێک بەکاری بهێنیت. لەبری ئەوە پۆلەکە وەک توخمێکی پێچانی سەربەخۆ بەکاربهێنە.

نموونە

بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:

• .collapseناوەڕۆک دەشارێتەوە
• .collapsingلە کاتی گواستنەوەکاندا بەکاردەهێنرێت
• .collapse.showناوەڕۆک نیشان دەدات

بەگشتی پێشنیار دەکەین دوگمەیەک بەکاربهێنیت کە data-bs-targetتایبەتمەندییەکەی هەبێت. لە کاتێکدا لە ڕوانگەی ماناسازییەوە پێشنیار ناکرێت، دەتوانیت بەستەرێک بەکاربهێنیت کە hrefتایبەتمەندی (و a role="button"). لە هەردوو حاڵەتەکەدا، the data-bs-toggle="collapse"is required.

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

ئاسۆیی

هەروەها پێوەکراوەکەی collapse پشتگیری لە داڕمانی ئاسۆیی دەکات. پۆلی دەستکاریکەر زیاد بکە .collapse-horizontalبۆ گواستنەوەی لە widthجیاتی heightو دانانی a widthلەسەر توخمە منداڵە دەستبەجێیەکە. ئازادانە Sass تایبەت بە خۆت بنووسە، ستایلەکانی ناو هێڵ بەکاربهێنە، یان سوودمەندییەکانی پاناییمان بەکاربهێنە .

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

چەند ئامانجێک

A <button>یان <a>دەتوانێت چەندین توخم پیشان بدات و بیشارێتەوە بە ئاماژەکردنیان بە هەڵبژێرەرێک لە hrefتایبەتمەندی data-bs-targetیانەکەیدا. چەند <button>یان <a>دەتوانن توخمێک نیشان بدەن و بیشارنەوە ئەگەر هەریەکەیان بە تایبەتمەندی یانەکەیان hrefئاماژەی data-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>

دەستڕاگەیشتن

دڵنیابە زیاد بکە aria-expandedبۆ توخمە کۆنترۆڵەکە. ئەم تایبەتمەندییە بە ڕوونی دۆخی ئێستای توخمە داڕووخاوەکە دەگەیەنێت کە بەستراوەتەوە بە کۆنتڕۆڵەکە بۆ خوێنەرانی شاشە و تەکنەلۆژیا یارمەتیدەرە هاوشێوەکان. ئەگەر توخمە داخراوەکە بە شێوازی پێشوەختە داخراو بێت، تایبەتمەندییەکە لەسەر توخمە کۆنترۆڵەکە دەبێت بەهای aria-expanded="false". ئەگەر توخمە داخراوەکەت بە شێوازی پێشوەختە بە بەکارهێنانی showپۆلەکە ڕێکخستووە کە کراوە بێت، aria-expanded="true"لەبری ئەوە لەسەر کۆنتڕۆڵەکە ڕێکبخە. پێوەکراوەکە بە شێوەیەکی ئۆتۆماتیکی ئەم تایبەتمەندییە لەسەر کۆنتڕۆڵەکە دەگۆڕێت بە پشتبەستن بەوەی کە ئایا توخمە داخراوەکە کراوەتەوە یان داخراوە یان نا (لە ڕێگەی جاڤاسکڕێپتەوە، یان لەبەر ئەوەی بەکارهێنەر توخمێکی کۆنترۆڵێکی دیکەی دەستپێکردووە کە هەروەها بەستراوەتەوە بە هەمان توخمە داخراوەکە). ئەگەر توخمە HTML ی توخمە کۆنترۆڵەکە دوگمەیەک نەبێت (بۆ نموونە، an <a>یان <div>)، تایبەتمەندییەکەrole="button"پێویستە زیاد بکرێت بۆ توخمەکە.

ئەگەر توخمە کۆنترۆڵەکەت تاکە توخمێکی داڕووخاو دەکاتە ئامانج – واتە data-bs-targetتایبەتمەندییەکە ئاماژە بە idهەڵبژێرەرێک دەکات – پێویستە aria-controlsتایبەتمەندییەکە زیاد بکەیت بۆ توخمە کۆنترۆڵەکە، کە idتوخمە داڕووخاوەکەی تێدایە. خوێنەری شاشەی مۆدێرن و تەکنەلۆژیای یارمەتیدەری هاوشێوە لەم تایبەتمەندییە کەڵک وەردەگرن بۆ ئەوەی بەکارهێنەران کورتە ڕێگای زیادە بدەن بۆ ئەوەی ڕاستەوخۆ بچنە سەر خودی توخمە داڕووخاوەکە.

تێبینی بکە کە جێبەجێکردنی ئێستای Bootstrap کارلێکە جۆراوجۆرەکانی کیبۆرد هەڵبژاردە ناگرێتەوە کە لە نەخشی ئەکۆردیۆنی ڕێنمایی شێوازەکانی نووسینی ARIA باسکراوە - پێویستە خۆت ئەمانە لەگەڵ جاڤاسکڕێپتی تایبەتمەنددا جێگیر بکەیت.

ساس

گۆڕاوەکان

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

پۆلەکان

پۆلەکانی گواستنەوەی داڕمان دەتوانرێت لە بدۆزرێتەوە scss/_transitions.scssچونکە ئەمانە لە سەرانسەری چەندین پێکهاتەدا هاوبەشن (داڕمان و ئەکۆردیۆن).

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

بەکارهێنان

پێوەکراوەکەی داڕمان چەند پۆلێک بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ بەرزکردنەوەی قورس:

• .collapseناوەڕۆکەکە دەشارێتەوە
• .collapse.showناوەڕۆکەکەی نیشان دەدات
• .collapsingکاتێک گواستنەوەکە دەست پێدەکات زیاد دەکرێت، و کاتێک تەواو دەبێت لادەبرێت

ئەم پۆلانە دەتوانرێت لە _transitions.scss.

لە ڕێگەی تایبەتمەندییەکانی داتا

تەنها زیاد بکە data-bs-toggle="collapse"و a data-bs-targetبۆ توخمەکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی یەکێک یان چەند توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-bs-targetهەڵبژێرەری CSS قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapseبۆ توخمە داخراوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکە show.

بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ ناوچەیەکی داخراو، تایبەتمەندی داتا زیاد بکە data-bs-parent="#selector". بۆ زانیاری زیاتر سەردانی لاپەڕەی ئەکۆردیۆن بکە .

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەست چالاک بکە لەگەڵ:

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

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، titleبەهای کۆتایی دەبێت 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا دەتوانن بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

شێوازەکان

ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

دەتوانیت بە بنیاتنانەکە نموونەی داڕمان دروست بکەیت، بۆ نموونە:

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

ڕووداوەکان

پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.

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