ٽٽڻ
ڪجھ طبقن ۽ اسان جي جاوا اسڪرپٽ پلگ ان سان توھان جي پروجيڪٽ ۾ مواد جي نمائش کي ٽوگل ڪريو.
اهو ڪيئن ڪم ڪري ٿو
کولڻ وارو JavaScript پلگ ان مواد کي ڏيکارڻ ۽ لڪائڻ لاءِ استعمال ٿيندو آهي. بٽڻ يا اينڪرز استعمال ڪيا ويندا آھن محرڪ طور جيڪي مخصوص عناصر سان نقشا آھن جيڪي توھان ٽوگل ڪندا آھيو. هڪ عنصر کي ڪليپ ڪرڻ height
سان ان جي موجوده قيمت کان 0
. ڏنو ويو ڪيئن CSS اينيميشنز کي سنڀاليندو آهي، توهان padding
هڪ .collapse
عنصر تي استعمال نٿا ڪري سگهو. ان جي بدران، ڪلاس کي آزاد لفافي عنصر طور استعمال ڪريو.
prefers-reduced-motion
ميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو
.
مثال
ڪلاس تبديلين ذريعي ٻيو عنصر ڏيکارڻ ۽ لڪائڻ لاءِ ھيٺ ڏنل بٽڻن تي ڪلڪ ڪريو:
.collapse
مواد لڪائي ٿو.collapsing
منتقلي دوران لاڳو ٿئي ٿو.collapse.show
مواد ڏيکاري ٿو
data-target
عام طور تي، اسان خاصيت سان هڪ بٽڻ استعمال ڪرڻ جي صلاح ڏيو ٿا . جڏهن ته سيمينٽڪ نقطي نظر کان سفارش نه ڪئي وئي آهي، توهان پڻ استعمال ڪري سگهو ٿا هڪ ڪڙي سان href
وصف (۽ هڪ 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
منتقلي لاءِ ۽ سيٽ ڪريو a تي فوري ٻار عنصر. آزاد محسوس ڪريو پنهنجو ذاتي Sass لکو، ان لائن اسلوب استعمال ڪريو، يا اسان جي ويڊٿ يوٽيلٽيز استعمال ڪريو .width
height
width
min-height
اسان جي دستاويزن ۾ وڌيڪ رنگن کان بچڻ لاء هڪ سيٽ آهي، اهو واضح طور تي گهربل ناهي.
صرف width
ٻار تي عنصر جي ضرورت آهي.
<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 چونڊيندڙ سان ان جي href
يا data-target
خاصيت ۾. گھڻا <button>
يا <a>
ھڪڙو عنصر ڏيکاري ۽ لڪائي سگھي ٿو جيڪڏھن اھي ھر ھڪ ان کي پنھنجي href
يا data-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 انداز، .accordion
هڪ wrapper طور استعمال ڪرڻ جي پڪ ڪريو.
.show
ڪلاس جي.
<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 عنصر هڪ بٽڻ نه آهي (مثال طور، هڪ <a>
يا <div>
)، خاصيتrole="button"
عنصر ۾ شامل ڪيو وڃي.
جيڪڏهن توهان جو ڪنٽرول عنصر هڪ واحد ختم ٿيڻ واري عنصر کي نشانو بڻائي رهيو آهي - يعني data-target
وصف هڪ id
چونڊيندڙ ڏانهن اشارو ڪري رهيو آهي - توهان کي aria-controls
ڪنٽرول عنصر ۾ وصف شامل ڪرڻ گهرجي، جنهن ۾ id
ختم ٿيڻ واري عنصر شامل آهي. جديد اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون استعمال ڪن ٿيون هن وصف کي استعمال ڪندڙن کي اضافي شارٽ ڪٽ مهيا ڪرڻ لاءِ ته جيئن پاڻ سڌو سنئون ڪلپسيبل عنصر ڏانهن وڃو.
نوٽ ڪريو ته Bootstrap جو موجوده نفاذ ARIA Authoring Practices Guide accordion pattern ۾ بيان ڪيل مختلف ڪيبورڊ رابطي کي ڍڪي نه ٿو ڏئي - توھان کي انھن کي پاڻ ۾ شامل ڪرڻو پوندو حسب ضرورت JavaScript سان.
استعمال
کولڻ وارو پلگ ان ڳري کڻڻ کي سنڀالڻ لاءِ ڪجھ طبقن کي استعمال ڪري ٿو:
.collapse
مواد کي لڪائي ٿو.collapse.show
مواد ڏيکاري ٿو.collapsing
شامل ڪيو ويندو آهي جڏهن منتقلي شروع ٿئي ٿي، ۽ هٽايو ويندو آهي جڏهن اهو ختم ٿئي ٿو
اهي ڪلاس ۾ ڳولي سگهجن ٿا _transitions.scss
.
ڊيٽا خاصيتن جي ذريعي
بس شامل ڪريو data-toggle="collapse"
۽ هڪ data-target
عنصر کي خودڪار طور تي هڪ يا وڌيڪ ختم ٿيڻ واري عناصر جي ڪنٽرول کي تفويض ڪرڻ لاء. وصف قبول ڪري data-target
ٿو CSS چونڊيندڙ کي لاڳو ڪرڻ لاءِ. پڪ ڪريو ته ڪلاس collapse
کي ٽوڙڻ واري عنصر ۾ شامل ڪريو. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو show
.
شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري علائقي ۾، شامل ڪريو ڊيٽا خاصيت data-parent="#selector"
. هن کي عمل ۾ ڏسڻ لاءِ ڊيم جو حوالو ڏيو.
جاوا اسڪرپٽ ذريعي
دستي طور تي فعال ڪريو:
$('.collapse').collapse()
اختيارن
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-parent=""
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
والدين | چونڊيندڙ | jQuery اعتراض | DOM عنصر | ڪوڙو | جيڪڏهن والدين مهيا ڪيو وڃي، ته پوءِ بيان ڪيل والدين جي هيٺان سڀ ٽوڙڻ وارا عنصر بند ٿي ويندا جڏهن هي ٽوڙڻ واري شيءِ ڏيکاري ويندي. card (روايتي accordion رويي سان ملندڙ جلندڙ - اهو طبقن تي منحصر آهي ). وصف کي ٽارگيٽ ڪلپسيبل ايريا تي مقرر ڪيو وڃي. |
ٽوگل ڪرڻ | بولين | سچو | ٽوگل ڪرڻ واري عنصر کي دعوت ڏيڻ تي |
طريقا
هم وقت سازي طريقا ۽ منتقلي
سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .
.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')
هڪ عنصر جي خاتمي کي تباهه ڪري ٿو.
واقعا
بوٽ اسٽريپ جي تباهي واري طبقي کي ختم ڪرڻ جي ڪارڪردگي ۾ ڇڪڻ لاء ڪجھ واقعن کي ظاهر ڪري ٿو.
واقعي جو قسم | وصف |
---|---|
show.bs.collapse | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. |
ڏيکاريو ويو.bs.collapse | هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ ختم ٿيڻ واري عنصر کي استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
hide.bs.collapse | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide طريقي کي سڏيو ويو آهي. |
hidden.bs.collapse | هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ تباهي عنصر صارف کان لڪايو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})