හකුළන්න
පන්ති කිහිපයක් සහ අපගේ ජාවාස්ක්රිප්ට් ප්ලගීන සමඟින් ඔබේ ව්යාපෘතිය හරහා අන්තර්ගතයේ දෘශ්යතාව ටොගල් කරන්න.
එය ක්රියා කරන ආකාරය
බිඳවැටීමේ 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>
තිරස්
කඩා වැටීමේ ප්ලගිනය තිරස් කඩා වැටීමට ද සහාය වේ. ඒ වෙනුවට .collapse-horizontal
සංක්රමණය කිරීමට විකරණකාරක පන්තිය එක් කර ක්ෂණික ළමා මූලද්රව්ය මත සකසන්න . ඔබේම අභිරුචි Sass ලිවීමට, පේළිගත මෝස්තර භාවිතා කිරීමට හෝ අපගේ පළල උපයෝගිතා භාවිතා කිරීමට නිදහස් වන්න .width
height
width
min-height
පහත උදාහරණයේ අපගේ ලේඛනවල අධික ලෙස නැවත පින්තාරු කිරීම වැළැක්වීමට කට්ටලයක් ඇති අතර, මෙය පැහැදිලිව අවශ්ය නොවන
බව කරුණාවෙන් සලකන්න
. ළමා මූලද්රව්ය මත පමණක් අවශ්ය වේ.width
<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>
තේරීම්කාරකයක් සමඟ යොමු කිරීමෙන් ඒවා පෙන්වීමට සහ සැඟවීමට හැකිය . බහුවිධ හෝ ඒවා එක් එක් මූලද්රව්යයක් ඒවායේ හෝ ගුණාංගය සමඟ යොමු කරන්නේ නම් එය පෙන්වීමට සහ සැඟවීමට හැකිය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"
ඒ වෙනුවට පාලනය මත සකසන්න. ප්ලගිනය මෙම ගුණාංගය ස්වයංක්රීයව පාලනය මත ටොගල් කරනු ඇත (JavaScript හරහා, හෝ පරිශීලකයා එම කඩාවැටිය හැකි මූලද්රව්යයට බැඳී ඇති වෙනත් පාලන මූලද්රව්යයක් ක්රියාකරවීම නිසා). පාලන මූලද්රව්යයේ HTML මූලද්රව්යය බොත්තමක් නොවේ නම් (උදා, a <a>
හෝ <div>
), ගුණාංගයrole="button"
මූලද්රව්යයට එකතු කළ යුතුය.
ඔබගේ පාලන මූලද්රව්ය තනි කඩාහැලෙන මූලද්රව්යයක් ඉලක්ක කරන්නේ නම් - එනම් උපලක්ෂණය තේරීම්කාරකයක් data-bs-target
වෙත යොමු කරයි නම් - ඔබ කඩාහැලෙන මූලද්රව්ය අඩංගු පාලන මූලද්රව්යයට උපලක්ෂණය එක් කළ යුතුය . නවීන තිර කියවනය සහ ඒ හා සමාන උපකාරක තාක්ෂණයන් මෙම ගුණාංගය භාවිතා කර පරිශීලකයින්ට කඩාවැටෙන මූලද්රව්ය වෙත කෙලින්ම සැරිසැරීමට අමතර කෙටිමං ලබා දෙයි.id
aria-controls
id
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 ක්රම අසමමුහුර්ත වන අතර සංක්රාන්තියක් ආරම්භ කරන්න . සංක්රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්රාන්ති සංරචකයක ක්රම ඇමතුමක් නොසලකා හරිනු ඇත .
ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්රව්යයක් ලෙස සක්රිය කරයි. විකල්ප විකල්ප පිළිගනී 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) |
සිදුවීම්
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...
})