পতন হোৱা
আপোনাৰ প্ৰকল্পত বিষয়বস্তুৰ দৃশ্যমানতা কেইটামান শ্ৰেণী আৰু আমাৰ জাভাস্ক্রিপ্ট প্লাগইনসমূহৰ সৈতে টগল কৰক।
কেনেকৈ কাম কৰে
সংকুচিত জাভাস্ক্রিপ্ট প্লাগইন বিষয়বস্তু দেখুৱাবলৈ আৰু লুকুৱাবলৈ ব্যৱহাৰ কৰা হয়। বুটাম বা এংকৰসমূহক ট্ৰিগাৰ হিচাপে ব্যৱহাৰ কৰা হয় যি আপুনি টগল কৰা নিৰ্দিষ্ট উপাদানসমূহলে মেপ কৰা হয়। এটা উপাদান সংকুচিত কৰিলে 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
পৰিবৰ্তক শ্ৰেণী যোগ কৰক পৰিবৰ্তন কৰিবলে width
পৰিবৰ্তন আৰু তৎক্ষণাত সন্তান উপাদানত height
a সংহতি কৰক । আপোনাৰ নিজৰ স্বনিৰ্বাচিত Sass লিখিবলৈ, ইনলাইন শৈলীসমূহ ব্যৱহাৰ কৰিবলৈ, বা আমাৰ প্ৰস্থ সঁজুলিসমূহwidth
ব্যৱহাৰ কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক ।
min-height
আমাৰ নথিপত্ৰসমূহত অত্যধিক পুনৰ ৰং কৰা এৰাই চলিবলৈ এটা ছেট আছে যদিও, ইয়াৰ স্পষ্ট প্ৰয়োজন নাই।
কেৱল width
on দ্য চাইল্ড উপাদানটোৰ প্ৰয়োজন।
<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"
ইয়াৰ পৰিবৰ্তে নিয়ন্ত্ৰণত সংহতি কৰক। প্লাগ-ইনে স্বয়ংক্ৰিয়ভাৱে এই বৈশিষ্ট্য নিয়ন্ত্ৰণত টগল কৰিব সংকোচনযোগ্য উপাদানটো খোলা বা বন্ধ কৰা হৈছে নে নাই তাৰ ওপৰত ভিত্তি কৰি (জাভাস্ক্রিপ্টৰ যোগেদি, বা কাৰণ ব্যৱহাৰকাৰীয়ে একেটা সংকোচনযোগ্য উপাদানৰ সৈতেও বান্ধ খাই থকা অন্য নিয়ন্ত্ৰণ উপাদান ট্ৰিগাৰ কৰিছিল)। যদি নিয়ন্ত্ৰণ উপাদানৰ HTML উপাদান এটা বুটাম নহয় (যেনে, an <a>
বা <div>
), বৈশিষ্ট্যrole="button"
উপাদানটোৰ লগত যোগ কৰিব লাগে।
যদি আপোনাৰ নিয়ন্ত্ৰণ উপাদানে এটা সংকোচনযোগ্য উপাদান লক্ষ্য কৰিছে – অৰ্থাৎ data-bs-target
বৈশিষ্ট্যই এটা id
নিৰ্বাচকলৈ আঙুলিয়াইছে – আপুনি aria-controls
নিয়ন্ত্ৰণ উপাদানত বৈশিষ্ট্য যোগ কৰিব লাগে, id
সংকোচনযোগ্য উপাদানৰ ধাৰণ কৰি। আধুনিক পৰ্দা পাঠক আৰু অনুৰূপ সহায়ক প্ৰযুক্তিসমূহে এই বৈশিষ্ট্যৰ ব্যৱহাৰ কৰে ব্যৱহাৰকাৰীসকলক সংকোচনযোগ্য উপাদানলৈ প্ৰত্যক্ষভাৱে নেভিগেট কৰিবলে অতিৰিক্ত চৰ্টকাটসমূহ প্ৰদান কৰিবলে।
মন কৰিব যে Bootstrap ৰ বৰ্তমান প্ৰণয়নে WAI-ARIA Authoring Practices 1.1 accordion আৰ্হিত বৰ্ণনা কৰা বিভিন্ন বৈকল্পিক কিবৰ্ড পাৰস্পৰিক ক্ৰিয়াসমূহ সামৰি লোৱা নাই - আপুনি এইবোৰ নিজেই স্বনিৰ্বাচিত JavaScript ৰ সৈতে অন্তৰ্ভুক্ত কৰিব লাগিব ।
ছাছ
চলকসমূহ
$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"
আৰু এটা যোগ কৰক । data-bs-target
বৈশিষ্ট্যই এটা CSS নিৰ্বাচক গ্ৰহণ কৰে য'ত 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 বস্তু | 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) |
ইভেন্টসমূহ
বুটষ্ট্ৰেপৰ পতন শ্ৰেণীয়ে পতন কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।
ইভেন্টৰ ধৰণ | বিৱৰণ |
---|---|
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...
})