سقوط - فروپاشی

چگونه کار می کند

پلاگین جاوا اسکریپت جمع شده برای نمایش و پنهان کردن محتوا استفاده می شود. دکمه‌ها یا لنگرها به‌عنوان محرک‌هایی استفاده می‌شوند که به عناصر خاصی که شما تغییر می‌دهید، نگاشت می‌شوند. جمع کردن یک عنصر باعث متحرک سازی آن 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 از جمع شدن افقی نیز پشتیبانی می کند. .collapse-horizontalکلاس اصلاح کننده را برای انتقال به widthجای اضافه کنید heightو a widthرا روی عنصر فرزند فوری تنظیم کنید. راحت باشید Sass سفارشی خود را بنویسید، از سبک های درون خطی استفاده کنید یا از ابزارهای عرض ما استفاده کنید .

<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>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عنصر جمع شونده است. صفحه‌خوان‌های مدرن و فناوری‌های کمکی مشابه از این ویژگی استفاده می‌کنند تا میانبرهای اضافی را برای کاربران فراهم کنند تا مستقیماً به خود عنصر جمع شونده حرکت کنند.

توجه داشته باشید که پیاده‌سازی فعلی بوت استرپ، تعاملات مختلف صفحه کلید اختیاری شرح داده شده در الگوی آکاردئونی راهنمای شیوه‌های نگارش 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محتوا را پنهان می کند
• .collapse.showمحتوا را نشان می دهد
• .collapsingهنگامی که انتقال شروع می شود اضافه می شود و پس از پایان آن حذف می شود

این کلاس ها را می توان در _transitions.scss.

از طریق ویژگی های داده

کافیست data-bs-toggle="collapse"یک و a data-bs-targetرا به عنصر اضافه کنید تا کنترل یک یا چند عنصر جمع شونده را به طور خودکار اختصاص دهید. این data-bs-targetویژگی یک انتخابگر CSS را می پذیرد تا جمع کردن را به آن اعمال کند. حتماً کلاس 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.

می توانید یک نمونه collapse با سازنده ایجاد کنید، به عنوان مثال:

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

مناسبت ها

کلاس فروپاشی بوت استرپ، چند رویداد را برای اتصال به عملکرد جمع شدن در معرض نمایش می گذارد.

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