ٽٽڻ

اهو ڪيئن ڪم ڪري ٿو

کولڻ وارو JavaScript پلگ ان مواد کي ڏيکارڻ ۽ لڪائڻ لاءِ استعمال ٿيندو آهي. بٽڻ يا اينڪرز استعمال ڪيا ويندا آھن محرڪ طور جيڪي مخصوص عناصر سان نقشا آھن جيڪي توھان ٽوگل ڪندا آھيو. هڪ عنصر کي ڪليپ ڪرڻ heightسان ان جي موجوده قيمت کان 0. ڏنو ويو ڪيئن CSS اينيميشنز کي سنڀاليندو آهي، توهان paddingهڪ .collapseعنصر تي استعمال نٿا ڪري سگهو. ان جي بدران، ڪلاس کي آزاد لفافي عنصر طور استعمال ڪريو.

مثال

ڪلاس تبديلين ذريعي ٻيو عنصر ڏيکارڻ ۽ لڪائڻ لاءِ ھيٺ ڏنل بٽڻن تي ڪلڪ ڪريو:

• .collapseمواد لڪائي ٿو
• .collapsingمنتقلي دوران لاڳو ٿئي ٿو
• .collapse.showمواد ڏيکاري ٿو

data-bs-targetعام طور تي، اسان خاصيت سان هڪ بٽڻ استعمال ڪرڻ جي صلاح ڏيو ٿا . جڏهن ته سيمينٽڪ نقطي نظر کان سفارش نه ڪئي وئي آهي، توهان پڻ استعمال ڪري سگهو ٿا هڪ ڪڙي سان hrefوصف (۽ هڪ role="button"). ٻنهي صورتن ۾، data-bs-toggle="collapse"ضروري آهي.

<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-horizontalمنتقلي لاءِ ۽ سيٽ ڪريو a تي فوري ٻار عنصر. آزاد محسوس ڪريو پنهنجو ذاتي Sass لکو، ان لائن اسلوب استعمال ڪريو، يا اسان جي ويڊٿ يوٽيلٽيز استعمال ڪريو .widthheightwidth

<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 عنصر هڪ بٽڻ نه آهي (مثال طور، هڪ <a>يا <div>)، خاصيتrole="button"عنصر کي شامل ڪرڻ گهرجي.

جيڪڏهن توهان جو ڪنٽرول عنصر هڪ واحد ختم ٿيڻ واري عنصر کي نشانو بڻائي رهيو آهي - يعني data-bs-targetوصف هڪ idچونڊيندڙ ڏانهن اشارو ڪري رهيو آهي - توهان کي aria-controlsڪنٽرول عنصر ۾ وصف شامل ڪرڻ گهرجي، جنهن ۾ idختم ٿيڻ واري عنصر شامل آهي. جديد اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون استعمال ڪن ٿيون هن وصف کي استعمال ڪندڙن کي اضافي شارٽ ڪٽ مهيا ڪرڻ لاءِ ته جيئن سڌو سنئون پاڻ کي ٽوڙڻ واري عنصر ڏانهن نيويگيٽ ڪري.

نوٽ ڪريو ته Bootstrap جو موجوده عمل ARIA Authoring Practices Guide accordion pattern ۾ بيان ڪيل مختلف اختياري ڪيبورڊ جي وچ ۾ رابطي جو احاطو نٿو ڪري - توھان کي انھن کي پاڻ ۾ شامل ڪرڻو پوندو حسب ضرورت JavaScript سان.

ساس

متغير

$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"۽ هڪ data-bs-targetعنصر کي خودڪار طور تي هڪ يا وڌيڪ ختم ٿيڻ واري عناصر جي ڪنٽرول کي تفويض ڪرڻ لاء. وصف قبول ڪري data-bs-targetٿو CSS چونڊيندڙ کي لاڳو ڪرڻ لاءِ. پڪ ڪريو ته ڪلاس collapseکي ٽوڙڻ واري عنصر ۾ شامل ڪريو. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو show.

شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري علائقي ۾، شامل ڪريو ڊيٽا خاصيت data-bs-parent="#selector". وڌيڪ معلومات لاء accordion صفحي ڏانهن وڃو .

جاوا اسڪرپٽ ذريعي

هٿ سان فعال ڪريو:

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

اختيارن

جيئن ته اختيارن کي ڊيٽا انتساب يا جاوا اسڪرپٽ ذريعي منتقل ڪري سگھجي ٿو، توھان ھڪڙي اختيار جو نالو شامل ڪري سگھو ٿا data-bs-، جيئن data-bs-animation="{value}". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت اختياري جي صورت واري قسم کي تبديل ڪرڻ جي پڪ ڪريو ”ڪيم ڪيس“ مان ” ڪباب ڪيس “. مثال طور، 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
})

واقعا

بوٽ اسٽريپ جي تباهي واري طبقي کي ختم ڪرڻ جي ڪارڪردگي ۾ ڇڪڻ لاء ڪجھ واقعن کي ظاهر ڪري ٿو.

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