گرنے

یہ کیسے کام کرتا ہے

کولپس جاوا اسکرپٹ پلگ ان مواد کو دکھانے اور چھپانے کے لیے استعمال کیا جاتا ہے۔ بٹن یا اینکرز کو محرکات کے طور پر استعمال کیا جاتا ہے جو آپ کے ٹوگل کرنے والے مخصوص عناصر کے ساتھ میپ کیے جاتے ہیں۔ کسی عنصر کو ختم کرنے heightسے اس کی موجودہ قدر سے 0. یہ دیکھتے ہوئے کہ CSS اینیمیشن کو کیسے ہینڈل کرتا ہے، آپ paddingکسی .collapseعنصر پر استعمال نہیں کر سکتے۔ اس کے بجائے، کلاس کو ایک آزاد ریپنگ عنصر کے طور پر استعمال کریں۔

مثال

کلاس تبدیلیوں کے ذریعے کسی اور عنصر کو دکھانے اور چھپانے کے لیے نیچے دیئے گئے بٹنوں پر کلک کریں:

• .collapseمواد چھپاتا ہے
• .collapsingٹرانزیشن کے دوران لاگو کیا جاتا ہے
• .collapse.showمواد دکھاتا ہے۔

data-bs-targetعام طور پر، ہم انتساب کے ساتھ بٹن استعمال کرنے کی تجویز کرتے ہیں۔ اگرچہ معنوی نقطہ نظر سے تجویز نہیں کی جاتی ہے، آپ hrefانتساب (اور a 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منتقلی کے لیے موڈیفائر کلاس شامل کریں اور فوری چائلڈ عنصر پر سیٹ کریں ۔ بلا جھجھک اپنی مرضی کے مطابق 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>میں سلیکٹر کے ساتھ حوالہ دے کر دکھا اور چھپا سکتا ہے۔ ایک سے زیادہ یا کسی عنصر کو دکھا اور چھپا سکتے ہیں اگر وہ ہر ایک اسے اپنے یا انتساب کے ساتھ حوالہ دیتے ہیں۔hrefdata-bs-target<button><a>hrefdata-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میں ٹوٹنے والا عنصر شامل ہو۔ جدید اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز اس وصف کا استعمال صارفین کو اضافی شارٹ کٹ فراہم کرنے کے لیے کرتی ہیں تاکہ وہ خود ہی ٹوٹنے والے عنصر پر براہ راست تشریف لے جائیں۔

نوٹ کریں کہ بوٹسٹریپ کا موجودہ نفاذ ARIA تصنیف کی مشق گائیڈ ایکارڈین پیٹرن میں بیان کردہ مختلف اختیاری کی بورڈ تعاملات کا احاطہ نہیں کرتا ہے - آپ کو اپنی مرضی کے مطابق 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"اور a شامل کریں ۔ data-bs-targetانتساب ایک CSS سلیکٹر کو قبول کرتا ہے جس data-bs-targetپر کولپس کو لاگو کیا جائے۔ کلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں show۔

اکارڈیئن نما گروپ مینجمنٹ کو ٹوٹنے کے قابل علاقے میں شامل کرنے کے لیے، ڈیٹا وصف شامل کریں data-bs-parent="#selector"۔ مزید معلومات کے لیے accordion کا صفحہ دیکھیں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

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

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 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...
})