পতন হোৱা

কেনেকৈ কাম কৰে

সংকুচিত জাভাস্ক্রিপ্ট প্লাগইন বিষয়বস্তু দেখুৱাবলৈ আৰু লুকুৱাবলৈ ব্যৱহাৰ কৰা হয়। বুটাম বা এংকৰসমূহক ট্ৰিগাৰ হিচাপে ব্যৱহাৰ কৰা হয় যি আপুনি টগল কৰা নিৰ্দিষ্ট উপাদানসমূহলে মেপ কৰা হয়। এটা উপাদান সংকুচিত কৰিলে heightইয়াৰ বৰ্তমান মানৰ পৰা 0. CSS এ এনিমেচনসমূহ কেনেকৈ নিয়ন্ত্ৰণ কৰে তাক দিলে, আপুনি paddingএটা .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-horizontalপৰিবৰ্তক শ্ৰেণী যোগ কৰক পৰিবৰ্তন কৰিবলে widthপৰিবৰ্তন আৰু তৎক্ষণাত সন্তান উপাদানত heighta সংহতি কৰক । আপোনাৰ নিজৰ স্বনিৰ্বাচিত Sass লিখিবলৈ, ইনলাইন শৈলীসমূহ ব্যৱহাৰ কৰিবলৈ, বা আমাৰ প্ৰস্থ সঁজুলিসমূহ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>এটা নিৰ্বাচকৰ সৈতে উল্লেখ কৰি একাধিক উপাদান দেখুৱাব আৰু লুকুৱাব পাৰে । একাধিক বা এটা উপাদান দেখুৱাব আৰু লুকুৱাব পাৰে যদি তেওঁলোকে প্ৰত্যেকেই ইয়াক তেওঁলোকৰ বা বৈশিষ্ট্যৰ সৈতে উল্লেখ কৰে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>বা <div>), বৈশিষ্ট্যrole="button"উপাদানটোৰ লগত যোগ কৰিব লাগে।

যদি আপোনাৰ নিয়ন্ত্ৰণ উপাদানে এটা সংকোচনযোগ্য উপাদান লক্ষ্য কৰিছে – অৰ্থাৎ data-bs-targetবৈশিষ্ট্যই এটা idনিৰ্বাচকলৈ আঙুলিয়াইছে – আপুনি aria-controlsনিয়ন্ত্ৰণ উপাদানত বৈশিষ্ট্য যোগ কৰিব লাগে, idসংকোচনযোগ্য উপাদানৰ ধাৰণ কৰি। আধুনিক পৰ্দা পাঠক আৰু অনুৰূপ সহায়ক প্ৰযুক্তিসমূহে এই বৈশিষ্ট্যৰ ব্যৱহাৰ কৰে ব্যৱহাৰকাৰীসকলক সংকোচনযোগ্য উপাদানলৈ প্ৰত্যক্ষভাৱে নেভিগেট কৰিবলে অতিৰিক্ত চৰ্টকাটসমূহ প্ৰদান কৰিবলে।

মন কৰিব যে Bootstrap ৰ বৰ্তমান প্ৰণয়নে ARIA ৰচনা অনুশীলনসমূহ সহায়ক 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"। অধিক তথ্যৰ বাবে একৰ্ডিয়ন পৃষ্ঠা চাওক ।

জাভাস্ক্রিপ্টৰ জৰিয়তে

হস্তচালিতভাৱে সামৰ্থবান কৰক:

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

বিকল্পসমূহ

যিহেতু বিকল্পসমূহক তথ্য বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি, আপুনি এটা বিকল্পৰ নাম যোগ কৰিব পাৰে data-bs-, যেনে data-bs-animation="{value}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ 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}'আৰু data-bs-title="456"বৈশিষ্ট্যসমূহ থাকে, চূড়ান্ত titleমান হ'ব 456আৰু পৃথক তথ্য বৈশিষ্ট্যসমূহে ত দিয়া মানসমূহ অভাৰৰাইড কৰিব data-bs-config। ইয়াৰ উপৰিও, বৰ্ত্তমানৰ তথ্য বৈশিষ্ট্যসমূহে JSON মানসমূহ ৰ দৰে ৰাখিবলৈ সক্ষম data-bs-delay='{"show":0,"hide":150}'।

পদ্ধতিসমূহ

আপোনাৰ বিষয়বস্তু এটা সংকোচনযোগ্য উপাদান হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object।

আপুনি নিৰ্মাতাৰ সৈতে এটা সংকুচিত উদাহৰণ সৃষ্টি কৰিব পাৰে, উদাহৰণস্বৰূপ:

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

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ পতন শ্ৰেণীয়ে পতন কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।

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