Жыйрату

Бірнеше сыныптар мен JavaScript плагиндері арқылы жобаңыздағы мазмұнның көріну мүмкіндігін ауыстырыңыз.

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

Тасымалдау JavaScript плагині мазмұнды көрсету және жасыру үшін пайдаланылады. Түймешіктер немесе якорьдер сіз ауыстыратын арнайы элементтермен салыстырылатын триггерлер ретінде пайдаланылады. Элементті жию heightоның ағымдағы мәнінен мәнін жандандырады 0. paddingCSS анимацияларды қалай өңдейтінін ескере отырып , .collapseэлементте пайдалана алмайсыз . Оның орнына классты тәуелсіз орау элементі ретінде пайдаланыңыз.

Мысал

Сынып өзгерістері арқылы басқа элементті көрсету және жасыру үшін төмендегі түймелерді басыңыз:

• .collapseмазмұнын жасырады
• .collapsingауысу кезінде қолданылады
• .collapse.showмазмұнын көрсетеді

data-targetӘдетте, төлсипаты бар түймені пайдалануды ұсынамыз . Семантикалық тұрғыдан ұсынылмағанымен, hrefатрибутпен (және a role="button") сілтемені де пайдалануға болады. Екі жағдайда да data-toggle="collapse"талап етіледі.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 плагині көлденең тарылтуды да қолдайды. Оның орнына .widthауысу үшін модификатор сыныбын қосыңыз және тікелей еншілес элементке a орнатыңыз . Өзіңіздің теңшелетін Sass жазуыңызды, кірістірілген мәнерлерді пайдалануды немесе ені утилиталарын пайдаланудан тартынбаңыз .widthheightwidth

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Бірнеше мақсат

A <button>немесе бірнеше элементтерді JQuery селекторымен немесе төлсипатта <a>сілтеме жасау арқылы көрсете және жасыра алады . Бірнеше немесе элементті көрсету және жасыру мүмкін, егер олардың әрқайсысы оған өзінің немесе төлсипаты арқылы сілтеме жасасаhrefdata-target<button><a>hrefdata-target

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Аккордеон мысалы

Карта құрамдас бөлігін пайдаланып , аккордеон жасау үшін әдепкі құлдырау әрекетін кеңейтуге болады. Аккордеон стиліне дұрыс жету .accordionүшін орауыш ретінде пайдалануды ұмытпаңыз.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

Қол жетімділік

aria-expandedБасқару элементіне қосуды ұмытпаңыз . Бұл төлсипат басқару элементіне байланған жиналмалы элементтің ағымдағы күйін экраннан оқу құралдарына және ұқсас көмекші технологияларға анық жеткізеді. Жиналмалы элемент әдепкі бойынша жабылса, басқару элементіндегі төлсипаттың мәні болуы керек aria-expanded="false". Жиналмалы элементті showсыныпты пайдаланып әдепкі бойынша ашық етіп орнатқан болсаңыз, aria-expanded="true"оның орнына басқару элементіне орнатыңыз. Плагин жиналмалы элементтің ашылғанына немесе жабылмағанына (JavaScript арқылы немесе пайдаланушы сол жиналатын элементке байланысты басқа басқару элементін іске қосқандықтан) негізінде басқару элементіндегі бұл төлсипатты автоматты түрде ауыстырады. Басқару элементінің HTML элементі түйме (мысалы, <a>немесе <div>) болмаса, төлсипатrole="button"элементіне қосу керек.

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

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

Қолданылуы

Collapse плагині ауыр жүкті көтеру үшін бірнеше сыныптарды пайдаланады:

• .collapseмазмұнын жасырады
• .collapse.showмазмұнын көрсетеді
• .collapsingауысу басталған кезде қосылады және ол аяқталған кезде жойылады

Бұл сыныптарды мына жерден табуға болады _transitions.scss.

Деректер атрибуттары арқылы

Бір немесе бірнеше жиналмалы элементтерді басқаруды автоматты түрде тағайындау үшін элементке жай ғана data-toggle="collapse"және a қосыңыз . data-targetТөлсипат data-targetқысқартуды қолдану үшін CSS селекторын қабылдайды. collapseСыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз show.

Жиналмалы аймаққа аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз data-parent="#selector". Бұл әрекетті көру үшін демонстрацияны қараңыз.

JavaScript арқылы

Қолмен қосу:

$('.collapse').collapse()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-parent="".

Әдістері

.collapse(options)

Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Жиналатын элементті көрсетілген немесе жасырын етіп ауыстырады. Жиналатын элемент нақты көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.collapseнемесе hidden.bs.collapseоқиға орын алмас бұрын) қоңырау шалушыға қайтарады.

.collapse('show')

Жиналатын элементті көрсетеді. Жиналмалы элемент нақты көрсетілмей тұрып (яғни shown.bs.collapseоқиға болғанға дейін) қоңырау шалушыға қайтарады.

.collapse('hide')

Жиналатын элементті жасырады. Жиналатын элемент шын мәнінде жасырылғанға дейін (яғни hidden.bs.collapseоқиға болғанға дейін) қоңырау шалушыға қайтарады.

.collapse('dispose')

Элементтің құлауын бұзады.

Оқиғалар

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})