سقوط

څنګه کار کوي

د جاواسکریپټ سقوط پلگ ان د مینځپانګې ښودلو او پټولو لپاره کارول کیږي. تڼۍ یا اینکرونه د محرکونو په توګه کارول کیږي کوم چې د ځانګړو عناصرو سره نقشه شوي چې تاسو یې بدل کړئ. د یو عنصر ماتول به 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اضافه کړئ او د سمدستي ماشوم عنصر باندې heightتنظیم کړئ . 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>کې د انتخاب کونکي سره راجع کولو سره وښیې او پټ کړي . ډیری یا کولی شي یو عنصر وښیي او پټ کړي که دوی هر یو د دوی یا ځانګړتیا سره حواله کړي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-targetCSS انتخاب کونکی مني چې د سقوط پلي کولو لپاره. ډاډ ترلاسه کړئ چې ټولګي 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 " څخه " کباب-کیس " ته بدل کړئ کله چې د ډیټا ځانګړتیاو له لارې اختیارونه تیریږي. د مثال په توګه، د 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
})

پیښې

د بوټسټریپ سقوط ټولګي د سقوط فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

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