संक्षिप्त गर्नुहोस्
केही कक्षाहरू र हाम्रा JavaScript प्लगइनहरूमार्फत तपाईंको परियोजनामा सामग्रीको दृश्यता टगल गर्नुहोस्।
यसले कसरी काम गर्छ
संक्षिप्त JavaScript प्लगइन सामग्री देखाउन र लुकाउन प्रयोग गरिन्छ। बटन वा एन्करहरू ट्रिगरहरूका रूपमा प्रयोग गरिन्छ जुन तपाईंले टगल गर्ने विशेष तत्वहरूमा म्याप गरिन्छ। एउटा तत्वलाई संक्षिप्त गर्दा 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>
धेरै लक्ष्यहरू
A <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 तत्व बटन होइन (जस्तै, an <a>
वा <div>
), विशेषताrole="button"
तत्वमा थपिनुपर्छ।
यदि तपाइँको नियन्त्रण तत्वले एकल कोल्प्सिबल एलिमेन्टलाई लक्षित गर्दैछ - अर्थात् data-bs-target
एट्रिब्युटले id
चयनकर्तालाई पोइन्ट गरिरहेको छ - तपाइँले aria-controls
कन्ट्रोल एलिमेन्टमा एट्रिब्यूट थप्नुपर्छ, जसमा id
कोल्प्सिबल एलिमेन्ट समावेश छ। आधुनिक स्क्रिन रिडरहरू र समान सहायक प्रविधिहरूले यो विशेषताको प्रयोग गरेर प्रयोगकर्ताहरूलाई सिधै कोल्प्सबल एलिमेन्टमा नेभिगेट गर्न थप सर्टकटहरू प्रदान गर्दछ।
नोट गर्नुहोस् कि बुटस्ट्र्यापको हालको कार्यान्वयनले WAI-ARIA Authoring Practices 1.1 accordion ढाँचामा वर्णन गरिएका विभिन्न वैकल्पिक किबोर्ड अन्तरक्रियाहरूलाई कभर गर्दैन - तपाईंले यसलाई आफू अनुकूल JavaScript सँग समावेश गर्न आवश्यक हुनेछ।
सास
चरहरू
$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"
र a । एट्रिब्युटले CSS चयनकर्ता स्वीकार गर्छ जसमा पतन लागू हुन्छ data-bs-target
। संकुचित तत्वमा 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)
})
विकल्पहरू
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-
, जस्तै मा data-bs-parent=""
।
नाम | टाइप गर्नुहोस् | पूर्वनिर्धारित | विवरण |
---|---|---|---|
parent |
चयनकर्ता | jQuery वस्तु | DOM तत्व | 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 |
यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। |
hide.bs.collapse |
यो घटना तुरुन्तै निकालिएको छ जब hide विधि कल गरिएको छ। |
hidden.bs.collapse |
यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})