Жыйрату

Бұл қалай жұмыс істейді

Тасымалдау JavaScript плагині мазмұнды көрсету және жасыру үшін пайдаланылады. Түймешіктер немесе якорьдер сіз ауыстыратын арнайы элементтермен салыстырылатын триггерлер ретінде пайдаланылады. Элементті жию heightоның ағымдағы мәнінен мәнін жандандырады 0. paddingCSS анимацияларды қалай өңдейтінін ескере отырып , .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ауысу үшін модификатор сыныбын қосыңыз және тікелей еншілес элементке a орнатыңыз . Өзіңіздің теңшелетін 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"оның орнына басқару элементіне орнатыңыз. Плагин жиналмалы элементтің ашылғанына немесе жабылмағанына (JavaScript арқылы немесе пайдаланушы сол жиналатын элементке байланысты басқа басқару элементін іске қосқандықтан) негізінде басқару элементіндегі бұл төлсипатты автоматты түрде ауыстырады. Басқару элементінің HTML элементі түйме (мысалы, <a>немесе <div>) болмаса, төлсипатrole="button"элементіне қосу керек.

Егер басқару элементі бір жиналатын элементке бағытталса, яғни data-bs-targetтөлсипат idселекторды меңзесе - жиналатын элементті aria-controlsқамтитын төлсипатты басқару элементіне қосу керек id. Заманауи экранды оқу құрылғылары және ұқсас көмекші технологиялар пайдаланушыларға жиналмалы элементтің өзіне тікелей өту үшін қосымша таңбашалар беру үшін осы атрибутты пайдаланады.

Bootstrap бағдарламасының ағымдағы іске асырылуы ARIA Авторлық тәжірибе нұсқаулығы аккордеон үлгісінде сипатталған әртүрлі қосымша пернетақта өзара әрекеттесулерін қамтымайтынын ескеріңіз - сіз оларды реттелетін JavaScript көмегімен өзіңіз қосуыңыз керек.

Сасс

Айнымалылар

$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". Қосымша ақпаратты аккордеон бетінен қараңыз .

JavaScript арқылы

Қолмен қосу:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Опциялар

Опциялар деректер атрибуттары немесе JavaScript арқылы берілуі мүмкін болғандықтан, параметр атауын data-bs-сияқты қосуға болады data-bs-animation="{value}". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін “ camelCase ” дан “ kebab-case ” түріне өзгертуді ұмытпаңыз. Мысалы, data-bs-custom-class="beautifier"орнына пайдаланыңыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте 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
})

Оқиғалар

Bootstrap құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

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