संश्यान

कथं कार्यं करोति

सामग्रीं दर्शयितुं गोपनार्थं च collapse JavaScript प्लगिन् उपयुज्यते । बटन्स् अथवा एङ्कर्स् इत्यस्य उपयोगः ट्रिगर् इत्यस्य रूपेण भवति ये भवता टॉग्ल् कृत्वा विशिष्टतत्त्वेषु मैप् कृताः भवन्ति । तत्त्वं संकुचितं कृत्वा heightतस्य वर्तमानमूल्यात् 0. paddingCSS एनिमेशनं कथं सम्पादयति इति दृष्ट्वा, भवान् कस्मिंश्चित् .collapseतत्त्वे उपयोक्तुं न शक्नोति । अपि तु स्वतन्त्रं वेष्टनतत्त्वरूपेण वर्गस्य उपयोगं कुर्वन्तु ।

उदाहरण

वर्गपरिवर्तनद्वारा अन्यं तत्त्वं दर्शयितुं गोपयितुं च अधोलिखितानि बटन्स् नुदन्तु:

• .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>

क्षैतिज

collapse प्लगिन् क्षैतिज collapsing अपि समर्थयति । instead of इत्यस्य .collapse-horizontalसंक्रमणार्थं modifier क्लास् योजयन्तु तथा च तत्कालं child element इत्यत्र a सेट् कुर्वन्तु । स्वकीयं कस्टम् Sass लिखितुं, इनलाइनशैल्याः उपयोगं कर्तुं, अथवा अस्माकं width utilities इत्यस्य उपयोगं कर्तुं निःशङ्कं भवन्तु .widthheightwidth

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

अनेक लक्ष्य

A <button>or इत्यस्य or attribute <a>इत्यस्मिन् selector इत्यनेन सह सन्दर्भयित्वा बहुधा तत्त्वानि दर्शयितुं गोपयितुं च शक्नोति । बहु वा एकं तत्त्वं दर्शयितुं गोपयितुं च शक्नुवन्ति यदि ते प्रत्येकं स्वस्य वा विशेषतायाः सह तस्य सन्दर्भं ददतिhrefdata-bs-target<button><a>hrefdata-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>or <div>), तर्हि विशेषताrole="button"तत्त्वं योजयेत् ।

यदि भवतां नियन्त्रणतत्त्वं एकं संकुचनीयं तत्त्वं लक्ष्यं करोति – अर्थात् data-bs-targetविशेषता चयनकर्तारं दर्शयति – तर्हि भवान् नियन्त्रणतत्त्वे विशेषतां idयोजयितव्यं , यत्र संकुचनीयतत्त्वस्य the भवति आधुनिकस्क्रीन् रीडर् तथा तत्सदृशाः सहायकप्रौद्योगिकयः अस्य विशेषतायाः उपयोगं कुर्वन्ति यत् उपयोक्तृभ्यः संकुचनीयतत्त्वे एव प्रत्यक्षतया गन्तुं अतिरिक्तशॉर्टकट् प्रदातुं शक्नुवन्तिaria-controlsid

ध्यानं कुर्वन्तु यत् Bootstrap इत्यस्य वर्तमानकार्यन्वयनं ARIA Authoring Practices Guide accordion pattern इत्यस्मिन् वर्णितानि विविधानि वैकल्पिकानि कीबोर्ड-अन्तर्क्रियाः न आच्छादयति - भवद्भ्यः एतानि स्वयमेव कस्टम् JavaScript इत्यनेन सह समावेशयितुं आवश्यकता भविष्यति

सस्स

चर

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

कक्षाः

Collapse transition classes इत्यत्र द्रष्टुं शक्यन्ते scss/_transitions.scssयतः एते बहुषु घटकेषु (collapse and accordion) साझाः भवन्ति ।

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

प्रयोगः

पतनप्लगिन् भारी उत्थापनं नियन्त्रयितुं कतिपयान् वर्गान् उपयुज्यते:

• .collapseसामग्रीं गोपयति
• .collapse.showसामग्रीं दर्शयति
• .collapsingसंक्रमणस्य आरम्भे योजितः भवति, समाप्तौ च निष्कासितः भवति

एते वर्गाः _transitions.scss.

डेटा विशेषताओं के माध्यम से

केवलं एकस्य वा अधिकस्य वा संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं तत्त्वे data-bs-toggle="collapse"and a योजयन्तु । विशेषणं संकुचनं प्रयोक्तुं CSS चयनकर्तारं स्वीकुर्वति data-bs-target। संकुचनीयतत्त्वे data-bs-targetवर्गं अवश्यं योजयन्तु । collapseयदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु show.

संकुचनीयक्षेत्रे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-bs-parent="#selector"। अधिकविवरणार्थं अकॉर्डियनपृष्ठं पश्यन्तु ।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

विकल्पाः

यतः विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।

Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति data-bs-config। तदतिरिक्तं, विद्यमानाः दत्तांशविशेषताः JSON मूल्यानि यथा - स्थापनं कर्तुं समर्थाः सन्ति data-bs-delay='{"show":0,"hide":150}'।

विधियाँ

भवतः सामग्रीं संकुचनीयतत्त्वरूपेण सक्रियं करोति । एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

भवन्तः कन्स्ट्रक्टर् इत्यनेन सह collapse instance रचयितुं शक्नुवन्ति, यथा :

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})