سقوط - فروپاشی
با چند کلاس و افزونههای جاوا اسکریپت، قابلیت مشاهده محتوا را در پروژه خود تغییر دهید.
چگونه کار می کند
پلاگین جاوا اسکریپت جمع شده برای نمایش و پنهان کردن محتوا استفاده می شود. دکمهها یا لنگرها بهعنوان محرکهایی استفاده میشوند که به عناصر خاصی که شما تغییر میدهید، نگاشت میشوند. جمع کردن یک عنصر باعث متحرک سازی آن 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>
اهداف متعدد
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 را پوشش نمی دهد - شما باید خودتان این موارد را با جاوا اسکریپت سفارشی اضافه کنید.
ساس
متغیرها
$transition-collapse: height .35s ease;
کلاس ها
کلاسهای انتقال فروپاشی را میتوان در آنها پیدا کرد scss/_transitions.scss
زیرا این کلاسها در چندین مؤلفه مشترک (جمع و آکاردئون) مشترک هستند.
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
استفاده
افزونه 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"
. برای مشاهده عملکرد به نسخه ی نمایشی مراجعه کنید.
از طریق جاوا اسکریپت
فعال کردن دستی با:
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
.
می توانید یک نمونه collapse با سازنده ایجاد کنید، به عنوان مثال:
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 |
روش ایستا که به شما امکان می دهد نمونه collapse مرتبط با یک عنصر 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...
})