সঙ্কুচিত

কিভাবে এটা কাজ করে

পতন জাভাস্ক্রিপ্ট প্লাগইন সামগ্রী দেখানো এবং লুকাতে ব্যবহৃত হয়। বোতাম বা অ্যাঙ্করগুলিকে ট্রিগার হিসাবে ব্যবহার করা হয় যা নির্দিষ্ট উপাদানগুলিতে ম্যাপ করা হয় যা আপনি টগল করেন৷ একটি উপাদান সঙ্কুচিত heightকরা তার বর্তমান মান থেকে অ্যানিমেট করবে 0। সিএসএস অ্যানিমেশনগুলি কীভাবে পরিচালনা করে তা প্রদত্ত, আপনি paddingএকটি .collapseউপাদানে ব্যবহার করতে পারবেন না। পরিবর্তে, ক্লাসটিকে একটি স্বাধীন মোড়ানো উপাদান হিসাবে ব্যবহার করুন।

উদাহরণ

ক্লাস পরিবর্তনের মাধ্যমে অন্য একটি উপাদান দেখাতে এবং লুকানোর জন্য নীচের বোতামগুলিতে ক্লিক করুন:

• .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 লিখুন, ইনলাইন শৈলী ব্যবহার করুন, বা আমাদের প্রস্থ ইউটিলিটিগুলি ব্যবহার করুন ৷widthheightwidth

<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 এলিমেন্ট একটি বোতাম না হয় (যেমন, একটি <a>বা <div>), অ্যাট্রিবিউটrole="button"উপাদান যোগ করা উচিত.

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

নোট করুন যে বুটস্ট্র্যাপের বর্তমান বাস্তবায়ন ARIA অথরিং প্র্যাকটিস গাইড অ্যাকর্ডিয়ান প্যাটার্নে বর্ণিত বিভিন্ন ঐচ্ছিক কীবোর্ড ইন্টারঅ্যাকশনগুলিকে কভার করে না - আপনাকে কাস্টম জাভাস্ক্রিপ্টের সাথে এগুলি অন্তর্ভুক্ত করতে হবে।

সস

ভেরিয়েবল

$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 পৃষ্ঠা পড়ুন .

জাভাস্ক্রিপ্টের মাধ্যমে

এর সাথে ম্যানুয়ালি সক্ষম করুন:

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"।

বুটস্ট্র্যাপ 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
})

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

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