गिर जाना
कुछ कक्षाओं और हमारे जावास्क्रिप्ट प्लग इन के साथ अपने प्रोजेक्ट में सामग्री की दृश्यता को टॉगल करें।
यह काम किस प्रकार करता है
सामग्री को दिखाने और छिपाने के लिए कोलैप्स जावास्क्रिप्ट प्लगइन का उपयोग किया जाता है। बटन या एंकर का उपयोग ट्रिगर के रूप में किया जाता है जो आपके द्वारा टॉगल किए जाने वाले विशिष्ट तत्वों के लिए मैप किए जाते हैं। किसी तत्व को संक्षिप्त करने height
से उसके वर्तमान मान से को चेतन हो जाएगा 0
। यह देखते हुए कि CSS एनिमेशन को कैसे संभालता है, आप किसी तत्व padding
पर उपयोग नहीं कर सकते। .collapse
इसके बजाय, कक्षा को एक स्वतंत्र रैपिंग तत्व के रूप में उपयोग करें।
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें
।
उदाहरण
वर्ग परिवर्तनों के माध्यम से अन्य तत्व दिखाने और छिपाने के लिए नीचे दिए गए बटन पर क्लिक करें:
.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>
एकाधिक लक्ष्य
ए <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 <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
तत्व में a जोड़ें। 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 |
एक तत्व के पतन को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है) |
getInstance |
स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े पतन उदाहरण प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
स्टेटिक विधि जो एक डोम तत्व से जुड़े एक पतन उदाहरण देता है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं: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...
})