گرنے

چند کلاسز اور ہمارے JavaScript پلگ انز کے ساتھ اپنے پروجیکٹ میں مواد کی مرئیت کو ٹوگل کریں۔

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

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

مثال

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

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

data-targetعام طور پر، ہم انتساب کے ساتھ بٹن استعمال کرنے کی تجویز کرتے ہیں۔ اگرچہ معنوی نقطہ نظر سے تجویز نہیں کی جاتی ہے، آپ hrefانتساب (اور a role="button") کے ساتھ ایک لنک بھی استعمال کر سکتے ہیں۔ دونوں صورتوں میں، data-toggle="collapse"ضروری ہے.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

افقی

کولپس پلگ ان افقی گرنے کی بھی حمایت کرتا ہے۔ اس کی بجائے .widthمنتقلی کے لیے موڈیفائر کلاس شامل کریں اور فوری چائلڈ عنصر پر سیٹ کریں ۔ بلا جھجھک اپنی مرضی کے مطابق Sass لکھیں، ان لائن اسٹائل استعمال کریں، یا ہماری چوڑائی کی افادیت استعمال کریں۔widthheightwidth

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

متعدد اہداف

A <button>یا ایک سے زیادہ عناصر کو اپنے یا انتساب <a>میں JQuery سلیکٹر کے ساتھ حوالہ دے کر دکھا اور چھپا سکتا ہے۔ ایک سے زیادہ یا کسی عنصر کو دکھا اور چھپا سکتے ہیں اگر وہ ہر ایک اسے اپنے یا انتساب کے ساتھ حوالہ دیتے ہیں۔hrefdata-target<button><a>hrefdata-target

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

ایکارڈین کی مثال

کارڈ کے اجزاء کا استعمال کرتے ہوئے ، آپ ایکارڈین بنانے کے لیے پہلے سے طے شدہ کولپس رویے کو بڑھا سکتے ہیں۔ accordion سٹائل کو مناسب طریقے سے حاصل کرنے کے لئے، .accordionایک چادر کے طور پر استعمال کرنے کا یقین رکھیں.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

رسائی

aria-expandedکنٹرول عنصر میں شامل کرنا یقینی بنائیں ۔ یہ وصف واضح طور پر اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز کے کنٹرول سے منسلک ٹوٹنے والے عنصر کی موجودہ حالت کو واضح طور پر بتاتا ہے۔ اگر ٹوٹنے والا عنصر بطور ڈیفالٹ بند ہو تو کنٹرول عنصر پر موجود انتساب کی قدر ہونی چاہیے aria-expanded="false"۔ showاگر آپ نے کلاس کا استعمال کرتے ہوئے ڈیفالٹ کے طور پر کھلنے کے لیے ٹوٹنے والا عنصر سیٹ کیا ہے، aria-expanded="true"تو اس کے بجائے کنٹرول پر سیٹ کریں۔ پلگ ان خود بخود اس انتساب کو کنٹرول پر ٹوگل کر دے گا کہ آیا ٹوٹنے والا عنصر کھولا یا بند ہوا ہے یا نہیں (جاوا اسکرپٹ کے ذریعے، یا اس وجہ سے کہ صارف نے دوسرے کنٹرول عنصر کو بھی اسی ٹوٹنے والے عنصر سے منسلک کیا ہے)۔ اگر کنٹرول عنصر کا HTML عنصر بٹن نہیں ہے (مثال کے طور پر، an <a>یا <div>)، وصفrole="button"عنصر میں شامل کیا جانا چاہئے.

اگر آپ کا کنٹرول عنصر کسی ایک ٹوٹنے کے قابل عنصر کو نشانہ بنا رہا ہے - یعنی data-targetانتساب ایک idسلیکٹر کی طرف اشارہ کر رہا ہے - تو آپ کو aria-controlsکنٹرول عنصر میں انتساب شامل کرنا چاہیے، جس idمیں ٹوٹنے والا عنصر شامل ہو۔ جدید اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز اس وصف کا استعمال صارفین کو اضافی شارٹ کٹ فراہم کرنے کے لیے کرتی ہیں تاکہ وہ خود ہی ٹوٹنے والے عنصر پر براہ راست تشریف لے جائیں۔

نوٹ کریں کہ Bootstrap کا موجودہ نفاذ ARIA Authoring Practices Guide accordion پیٹرن میں بیان کردہ کی بورڈ کے مختلف تعاملات کا احاطہ نہیں کرتا ہے - آپ کو اپنی مرضی کے مطابق JavaScript کے ساتھ ان کو شامل کرنے کی ضرورت ہوگی۔

استعمال

کولپس پلگ ان ہیوی لفٹنگ کو سنبھالنے کے لیے چند کلاسز کا استعمال کرتا ہے:

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

یہ کلاسز میں مل سکتی ہیں _transitions.scss۔

ڈیٹا اوصاف کے ذریعے

خود بخود ایک یا زیادہ ٹوٹنے والے عناصر کا کنٹرول تفویض کرنے کے لیے عنصر میں صرف data-toggle="collapse"اور a شامل کریں ۔ data-targetانتساب ایک CSS سلیکٹر کو قبول کرتا ہے جس data-targetپر کولپس کو لاگو کیا جائے۔ کلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں show۔

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

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

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

$('.collapse').collapse()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-parent=""۔

طریقے

.collapse(options)

آپ کے مواد کو ایک ٹوٹنے کے قابل عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

دکھائے جانے یا چھپنے کے لیے ٹوٹنے کے قابل عنصر کو ٹوگل کرتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.collapseیا hidden.bs.collapseواقعہ ہونے سے پہلے)۔

.collapse('show')

ایک ٹوٹنے والا عنصر دکھاتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.collapseواقعہ پیش آنے سے پہلے)۔

.collapse('hide')

ایک ٹوٹنے والا عنصر چھپاتا ہے۔ کالپس ایبل عنصر کے حقیقت میں پوشیدہ ہونے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.collapseواقعہ کے رونما ہونے سے پہلے)۔

.collapse('dispose')

ایک عنصر کے خاتمے کو تباہ کرتا ہے۔

تقریبات

بوٹسٹریپ کی گرنے والی کلاس گرنے کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})