সঙ্কুচিত
কয়েকটি ক্লাস এবং আমাদের জাভাস্ক্রিপ্ট প্লাগইনগুলির সাথে আপনার প্রকল্প জুড়ে সামগ্রীর দৃশ্যমানতা টগল করুন।
কিভাবে এটা কাজ করে
পতন জাভাস্ক্রিপ্ট প্লাগইন সামগ্রী দেখানো এবং লুকাতে ব্যবহার করা হয়। বোতাম বা অ্যাঙ্করগুলিকে ট্রিগার হিসাবে ব্যবহার করা হয় যা নির্দিষ্ট উপাদানগুলিতে ম্যাপ করা হয় যা আপনি টগল করেন৷ একটি উপাদান সঙ্কুচিত height
করা তার বর্তমান মান থেকে অ্যানিমেট করবে 0
। CSS অ্যানিমেশনগুলি কীভাবে পরিচালনা করে তা দেওয়া হলে, আপনি padding
একটি .collapse
উপাদানে ব্যবহার করতে পারবেন না। পরিবর্তে, ক্লাসটিকে একটি স্বাধীন মোড়ানো উপাদান হিসাবে ব্যবহার করুন।
prefers-reduced-motion
মিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন
।
উদাহরণ
ক্লাস পরিবর্তনের মাধ্যমে অন্য একটি উপাদান দেখাতে এবং লুকানোর জন্য নীচের বোতামগুলিতে ক্লিক করুন:
.collapse
বিষয়বস্তু লুকিয়ে রাখে.collapsing
পরিবর্তনের সময় প্রয়োগ করা হয়.collapse.show
বিষয়বস্তু দেখায়
সাধারণত, আমরা data-bs-target
অ্যাট্রিবিউট সহ একটি বোতাম ব্যবহার করার পরামর্শ দিই। শব্দার্থিক দৃষ্টিকোণ থেকে প্রস্তাবিত না হলেও, আপনি href
বৈশিষ্ট্য (এবং একটি 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"
, পরিবর্তে নিয়ন্ত্রণে সেট করুন। প্লাগইন স্বয়ংক্রিয়ভাবে এই অ্যাট্রিবিউটটিকে নিয়ন্ত্রণে টগল করবে যেটি বন্ধ করা যায় এমন উপাদানটি খোলা বা বন্ধ করা হয়েছে কিনা (জাভাস্ক্রিপ্টের মাধ্যমে, বা ব্যবহারকারী একই সংকোচযোগ্য উপাদানের সাথে সংযুক্ত অন্য নিয়ন্ত্রণ উপাদানটি ট্রিগার করেছে)। যদি কন্ট্রোল এলিমেন্টের HTML এলিমেন্ট একটি বোতাম না হয় (যেমন, একটি <a>
বা <div>
), অ্যাট্রিবিউটrole="button"
উপাদান যোগ করা উচিত.
যদি আপনার কন্ট্রোল এলিমেন্ট একটি একক কলাপসিবল এলিমেন্টকে টার্গেট করে – অর্থাৎ data-bs-target
অ্যাট্রিবিউটটি একটি id
সিলেক্টরের দিকে ইঙ্গিত করছে – তাহলে আপনাকে aria-controls
কন্ট্রোল এলিমেন্টে অ্যাট্রিবিউট যোগ করতে হবে, যার id
মধ্যে কলাপসিবল এলিমেন্ট থাকবে। আধুনিক স্ক্রিন রিডার এবং অনুরূপ সহায়ক প্রযুক্তিগুলি এই বৈশিষ্ট্যটি ব্যবহার করে ব্যবহারকারীদেরকে অতিরিক্ত শর্টকাট প্রদান করে যাতে তারা সরাসরি কলাপসিবল এলিমেন্টে নেভিগেট করতে পারে।
মনে রাখবেন যে বুটস্ট্র্যাপের বর্তমান বাস্তবায়ন 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 যোগ করুন। data-bs-target
অ্যাট্রিবিউটটি data-bs-target
একটি সিএসএস নির্বাচককে গ্রহন করে যাতে এটি সঙ্কুচিত হয়। collapse
কলাপসিবল এলিমেন্টে ক্লাস যোগ করতে ভুলবেন না । আপনি যদি এটি ডিফল্ট খুলতে চান তবে অতিরিক্ত ক্লাস যোগ করুন show
।
একটি সংকোচনযোগ্য এলাকায় অ্যাকর্ডিয়ন-সদৃশ গ্রুপ পরিচালনা যোগ করতে, ডেটা অ্যাট্রিবিউট যোগ করুন data-bs-parent="#selector"
। আরো তথ্যের জন্য accordion পৃষ্ঠা পড়ুন .
জাভাস্ক্রিপ্টের মাধ্যমে
এর সাথে ম্যানুয়ালি সক্ষম করুন:
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 |
এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি পতনের উপাদান ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.collapse |
এই ইভেন্ট অবিলম্বে বহিস্কার করা হয় যখন hide পদ্ধতি বলা হয়েছে. |
hidden.bs.collapse |
এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি পতনের উপাদান ব্যবহারকারীর কাছ থেকে লুকানো থাকে (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})