ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

හකුළන්න

පන්ති කිහිපයක් සහ අපගේ ජාවාස්ක්‍රිප්ට් ප්ලගීන සමඟින් ඔබේ ව්‍යාපෘතිය හරහා අන්තර්ගතයේ දෘශ්‍යතාව ටොගල් කරන්න.

එය ක්රියා කරන ආකාරය

බිඳවැටීමේ JavaScript ප්ලගිනය අන්තර්ගතය පෙන්වීමට සහ සැඟවීමට භාවිතා කරයි. බොත්තම් හෝ නැංගුරම් ඔබ ටොගල් කරන විශේෂිත මූලද්‍රව්‍ය වෙත සිතියම්ගත කර ඇති ප්‍රේරක ලෙස භාවිතා කරයි. මූලද්‍රව්‍යයක් කඩා වැටීම heightඑහි වත්මන් අගයේ සිට දක්වා සජීවීකරණය කරයි 0. CSS සජීවිකරණ හසුරුවන ආකාරය අනුව, ඔබට මූලද්‍රව්‍යයක් paddingමත භාවිතා කළ නොහැක. .collapseඒ වෙනුවට, ස්වාධීන දවටන අංගයක් ලෙස පන්තිය භාවිතා කරන්න.

මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

උදාහරණයක්

පන්ති වෙනස්කම් හරහා වෙනත් අංගයක් පෙන්වීමට සහ සැඟවීමට පහත බොත්තම් ක්ලික් කරන්න:

  • .collapseඅන්තර්ගතය සඟවයි
  • .collapsingමාරුවීම් වලදී යොදනු ලැබේ
  • .collapse.showඅන්තර්ගතය පෙන්වයි

data-bs-targetසාමාන්‍යයෙන්, අපි ගුණාංගය සහිත බොත්තමක් භාවිතා කිරීම නිර්දේශ කරමු . අර්ථකථන දෘෂ්ටිකෝණයකින් නිර්දේශ නොකළද, ඔබට hrefගුණාංගය (සහ a role="button") සමඟ සබැඳියක් ද භාවිතා කළ හැකිය. අවස්ථා දෙකේදීම, data-bs-toggle="collapse"එය අවශ්ය වේ.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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-horizontalසංක්‍රමණය කිරීමට විකරණකාරක පන්තිය එක් කර ක්ෂණික ළමා මූලද්‍රව්‍ය මත සකසන්න . ඔබේම අභිරුචි Sass ලිවීමට, පේළිගත මෝස්තර භාවිතා කිරීමට හෝ අපගේ පළල උපයෝගිතා භාවිතා කිරීමට නිදහස් වන්න .widthheightwidth

min-heightපහත උදාහරණයේ අපගේ ලේඛනවල අධික ලෙස නැවත පින්තාරු කිරීම වැළැක්වීමට කට්ටලයක් ඇති අතර, මෙය පැහැදිලිව අවශ්‍ය නොවන බව කරුණාවෙන් සලකන්න . ළමා මූලද්‍රව්‍ය මත පමණක් අවශ්‍ය වේ.width

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>හෝ බහු මූලද්‍රව්‍ය එහි හෝ ගුණාංගයේ <a>තේරීම්කාරකයක් සමඟ යොමු කිරීමෙන් ඒවා පෙන්වීමට සහ සැඟවීමට හැකිය . බහුවිධ හෝ ඒවා එක් එක් මූලද්‍රව්‍යයක් ඒවායේ හෝ ගුණාංගය සමඟ යොමු කරන්නේ නම් එය පෙන්වීමට සහ සැඟවීමට හැකියhrefdata-bs-target<button><a>hrefdata-bs-target

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.
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.
<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"ඒ වෙනුවට පාලනය මත සකසන්න. ප්ලගිනය මෙම ගුණාංගය ස්වයංක්‍රීයව පාලනය මත ටොගල් කරනු ඇත (JavaScript හරහා, හෝ පරිශීලකයා එම කඩාවැටිය හැකි මූලද්‍රව්‍යයට බැඳී ඇති වෙනත් පාලන මූලද්‍රව්‍යයක් ක්‍රියාකරවීම නිසා). පාලන මූලද්‍රව්‍යයේ HTML මූලද්‍රව්‍යය බොත්තමක් නොවේ නම් (උදා, a <a>හෝ <div>), ගුණාංගයrole="button"මූලද්රව්යයට එකතු කළ යුතුය.

ඔබගේ පාලන මූලද්‍රව්‍ය තනි කඩාහැලෙන මූලද්‍රව්‍යයක් ඉලක්ක කරන්නේ නම් - එනම් උපලක්ෂණය තේරීම්කාරකයක් data-bs-targetවෙත යොමු කරයි නම් - ඔබ කඩාහැලෙන මූලද්‍රව්‍ය අඩංගු පාලන මූලද්‍රව්‍යයට උපලක්ෂණය එක් කළ යුතුය . නවීන තිර කියවනය සහ ඒ හා සමාන උපකාරක තාක්ෂණයන් මෙම ගුණාංගය භාවිතා කර පරිශීලකයින්ට කඩාවැටෙන මූලද්‍රව්‍ය වෙත කෙලින්ම සැරිසැරීමට අමතර කෙටිමං ලබා දෙයි.idaria-controlsid

Bootstrap හි වත්මන් ක්‍රියාත්මක කිරීම WAI-ARIA Authoring Practices 1.1 Accordion රටාවේ විස්තර කර ඇති විවිධ විකල්ප යතුරුපුවරු අන්තර්ක්‍රියා ආවරණය නොකරන බව සලකන්න - ඔබට අභිරුචි ජාවාස්ක්‍රිප්ට් සමඟ මේවා ඔබම ඇතුළත් කිරීමට අවශ්‍ය වනු ඇත.

සාස්

විචල්යයන්

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

පංතිවල

scss/_transitions.scssමේවා බහු සංරචක (කඩාවැටීම සහ ඇකෝනියන්) හරහා බෙදාගෙන ඇති බැවින් හැකිලුම් සංක්‍රාන්ති පන්ති සොයා ගත හැක .

.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"සහ a කරන්න. උපලක්ෂණය බිඳවැටීම යෙදීමට CSS තේරීමක් පිළිගනී data-bs-target. කඩා වැටිය හැකි මූලද්‍රව්‍යයට data-bs-targetපන්තිය එක් කිරීමට වග බලා ගන්න . collapseඔබ එය පෙරනිමියෙන් විවෘත කිරීමට කැමති නම්, අමතර පන්තිය එක් කරන්න show.

කඩා වැටෙන ප්‍රදේශයකට Accordion වැනි සමූහ කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-bs-parent="#selector". වැඩි විස්තර සඳහා Accordion පිටුව බලන්න .

JavaScript හරහා

සමඟ අතින් සබල කරන්න:

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 ආමන්ත්‍රණයේදී කඩාහැලෙන මූලද්‍රව්‍යය ටොගල් කරයි

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

ඔබට ඉදිකිරීම්කරු සමඟ කඩා වැටීමේ අවස්ථාවක් සෑදිය හැක, උදාහරණයක් ලෙස:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
ක්රමය විස්තර
toggle හකුළ හැකි මූලද්‍රව්‍යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapsehidden.bs.collapse
show කඩා වැටෙන මූලද්‍රව්‍යයක් පෙන්වයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය සත්‍ය වශයෙන්ම පෙන්වීමට පෙර (උදා, සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapse
hide කඩා වැටෙන මූලද්‍රව්‍ය සඟවයි. බිඳවැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම සැඟවීමට පෙර ඇමතුම්කරු වෙත ආපසු පැමිණේ (උදා, hidden.bs.collapseසිදුවීම සිදුවීමට පෙර).
dispose මූලද්‍රව්‍ය කඩා වැටීම විනාශ කරයි. (DOM මූලද්‍රව්‍යයේ ගබඩා කර ඇති දත්ත ඉවත් කරයි)
getInstance DOM මූලද්‍රව්‍යයකට සම්බන්ධ බිඳවැටීමේ අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය, ඔබට එය මෙලෙස භාවිතා කළ හැක:bootstrap.Collapse.getInstance(element)
getOrCreateInstance ස්ථිතික ක්‍රමය DOM මූලද්‍රව්‍යයකට සම්බන්ධ බිඳවැටීමේ අවස්ථාවක් ආපසු ලබා දෙන හෝ එය ආරම්භ කර නොමැති අවස්ථාවක නව එකක් සාදන්න. ඔබට එය මේ ආකාරයෙන් භාවිතා කළ හැකිය:bootstrap.Collapse.getOrCreateInstance(element)

සිදුවීම්

Bootstrap හි කඩා වැටීමේ පන්තිය බිඳ වැටීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම් වර්ගය විස්තර
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...
})