شکست هێنان
بینینی ناوەڕۆک لە سەرانسەری پڕۆژەکەتدا بە چەند پۆلێک و پێوەکراوەکانی جاڤاسکڕێپتەکانمان بگۆڕە.
چۆن کاردەکات
پێوەکراوەکەی جاڤاسکڕێپتی داڕمان بەکاردێت بۆ پیشاندانی و شاردنەوەی ناوەڕۆک. دوگمەکان یان ئەنکرەکان وەکو تریگەر بەکاردەهێنرێن کە نەخشەیان بۆ دانراوە بۆ توخمە تایبەتەکان کە تۆ دەیگۆڕیت. داڕمانی توخمێک height
لە بەهای ئێستایەوە بۆ 0
. بە سەرنجدان بەوەی چۆن CSS مامەڵە لەگەڵ ئەنیمەیشنەکان دەکات، ناتوانیت padding
لەسەر .collapse
توخمێک بەکاری بهێنیت. لەبری ئەوە پۆلەکە وەک توخمێکی پێچانی سەربەخۆ بەکاربهێنە.
prefers-reduced-motion
پرسیاری میدیایە. سەیری
بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .
نموونە
بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:
.collapse
ناوەڕۆک دەشارێتەوە.collapsing
لە کاتی گواستنەوەکاندا بەکاردەهێنرێت.collapse.show
ناوەڕۆک نیشان دەدات
بەگشتی پێشنیار دەکەین دوگمەیەک بەکاربهێنیت کە data-bs-target
تایبەتمەندییەکەی هەبێت. لە کاتێکدا لە ڕوانگەی ماناسازییەوە پێشنیار ناکرێت، دەتوانیت بەستەرێک بەکاربهێنیت کە href
تایبەتمەندی (و a role="button"
). لە هەردوو حاڵەتەکەدا، the data-bs-toggle="collapse"
is required.
<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.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 |
boolean | 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) |
ڕووداوەکان
پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.
جۆری ڕووداو | وەسف |
---|---|
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...
})