खसि पड़नाइ
अपनऽ प्रोजेक्ट भर म॑ सामग्री केरऽ दृश्यता क॑ कुछ वर्ग आरू हमरऽ जावास्क्रिप्ट प्लगइन के साथ टॉगल करलऽ जाय ।
कोना काज करैत अछि
संकुचित जावास्क्रिप्ट प्लगइन कें उपयोग सामग्री कें दिखावा आ छिपाबै कें लेल करल जाय छै. बटन या एंकर कें उपयोग ट्रिगर कें रूप मे कैल जायत छै जे विशिष्ट तत्वक कें लेल मैप कैल जायत छै जेकरा अहां टॉगल करय छी. कोनो तत्व केँ संकुचित करब height
ओकर वर्तमान मान सँ 0
. ई देखैत जे CSS एनीमेशन के कोना संभालैत अछि, अहाँ कोनो तत्व padding
पर उपयोग नहि क सकैत छी । .collapse
एकर बजाय, वर्ग क' एकटा स्वतंत्र रैपिंग तत्व क रूप मे उपयोग करू.
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू
.
उदाहरण
वर्ग परिवर्तन के माध्यम स॑ दोसर तत्व क॑ दिखाबै आरू छिपाबै लेली नीचें देलऽ गेलऽ बटनऽ प॑ क्लिक करलऽ जाय छै:
.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>
एकाधिक लक्ष्य
ए <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
ध्यान रहे कि बूटस्ट्रैप कें वर्तमान कार्यान्वयन WAI-ARIA लेखन अभ्यास 1.1 अकॉर्डियन पैटर्न मे वर्णित विभिन्न वैकल्पिक कीबोर्ड अंतःक्रियाक कें कवर नहि करयत छै - अहां कें इ सब कें स्वयं कस्टम जावास्क्रिप्ट कें साथ शामिल करय कें आवश्यकता होयत.
सस्स
चर
$transition-collapse: height .35s ease;
कक्षाएँ
संकुचन संक्रमण वर्गक मे पाएल जा सकय छै scss/_transitions.scss
कियाकि इ कई घटक (पतन आ अकॉर्डियन) मे साझा कैल गेल छै.
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
प्रयोग
पतन प्लगइन भारी उठाव कें संभालएय कें लेल किछु वर्गक कें उपयोग करयत छै:
.collapse
सामग्री नुकाबैत अछि.collapse.show
सामग्री देखाबैत अछि.collapsing
संक्रमण शुरू भेला पर जोड़ल जाइत अछि, आ समाप्त भेला पर हटा देल जाइत अछि
ई वर्ग सभ _transitions.scss
.
डेटा विशेषताओं के माध्यम से
बस एक या एक सं बेसी संकुचित तत्वक कें नियंत्रण स्वचालित रूप सं असाइन करय कें लेल तत्व मे data-bs-toggle="collapse"
आ एकटा जोड़ू. data-bs-target
विशेषता एकटा CSS चयनकर्ता कें स्वीकार करयत छै जइ data-bs-target
पर संकुचन लागू करयत छै. collapse
संकुचित तत्व मे क्लास अवश्य जोड़ू । जँ अहाँ चाहैत छी जे ई पूर्वनिर्धारित रूपसँ खुजए, तँ अतिरिक्त वर्ग जोड़ू show
.
एकटा संकुचित क्षेत्र मे अकॉर्डियन-जैसा समूह प्रबंधन जोड़बाक लेल, डेटा विशेषता जोड़ू data-bs-parent="#selector"
. एकरा क्रिया मे देखबाक लेल डेमो देखू।
जावास्क्रिप्ट के माध्यम से
के साथ मैन्युअल रूप स सक्षम करू:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
विकल्प
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-bs-
, मे संलग्न करू , जेना data-bs-parent=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
parent |
चयनकर्ता | jQuery वस्तु | डोम तत्व | false |
यदि माता-पिता प्रदान कैल गेल छै, तखन निर्दिष्ट अभिभावक कें अंतर्गत सबटा संकुचित तत्व बंद भ जेतय जखन इ संकुचित आइटम देखायल जैतय. (पारंपरिक अकॉर्डियन व्यवहार के समान - ई card वर्ग पर निर्भर करैत अछि)। विशेषता कें लक्ष्य संकुचित क्षेत्र पर सेट करय कें होयत छै. |
toggle |
बूलियन | true |
आह्वान पर संकुचन योग्य तत्व टॉगल करैत अछि |
विधियाँ
अतुल्यकालिक विधि एवं संक्रमण
सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .
एकटा संकुचित तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object
.
अहाँ कंस्ट्रक्टरक संग एकटा संकुचन उदाहरण बना सकैत छी, उदाहरणक लेल:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
तरीका | वर्णन |
---|---|
toggle |
कोनो संकुचन योग्य तत्व केँ देखाओल गेल अथवा नुकाएल मे टॉगल करैत अछि. संकुचित तत्व कें वास्तव मे दिखायल गेलय या नुकाएलय सं पहिले (अर्थात shown.bs.collapse या hidden.bs.collapse घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबै छै. |
show |
एकटा संकुचित तत्व देखाबैत अछि। संकुचन योग्य तत्व कें वास्तव मे दिखाएय सं पहिले (जैना, shown.bs.collapse घटना घटित हुअ सं पहिले) कॉलर कें वापस आबै छै. |
hide |
एकटा संकुचित तत्व नुकाबैत अछि। संकुचित तत्व कें वास्तव मे नुकाएय सं पहिने (जैना, hidden.bs.collapse घटना घटित हुअ सं पहिने) कॉलर कें वापस आबै छै. |
dispose |
कोनो तत्वक पतनकेँ नष्ट करैत अछि। (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि) |
getInstance |
स्थिर विधि जे अहां कें कोनों DOM तत्व सं जुड़ल संकुचित इंस्टेंस प्राप्त करय कें अनुमति देयत छै, अहां एकर उपयोग अइ तरह कयर सकय छी:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
स्थिर विधि जे कोनों DOM तत्व सं जुड़ल एकटा संकुचन उदाहरण वापस करयत छै या एकटा नव बनायत छै अगर इ आरंभ नहि कैल गेलय कें स्थिति मे. एकर उपयोग अहां एहि तरहे क सकय छी:bootstrap.Collapse.getOrCreateInstance(element) |
घटनाक्रम
बूटस्ट्रैप केरऽ कोलैप्स क्लास कोलैप्स कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै ।
घटना प्रकार | वर्णन |
---|---|
show.bs.collapse |
show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. |
shown.bs.collapse |
ई घटना तखन फायर कएल जाइत अछि जखन कोनो संकुचन तत्व उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत) । |
hide.bs.collapse |
hide विधि बजाओल गेलाक बाद ई घटना तुरंत फायर कएल जाइत अछि । |
hidden.bs.collapse |
ई घटना तखन फायर कएल जाइत अछि जखन कोनो संकुचन तत्व उपयोगकर्ता सँ नुका देल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत) । |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})