Тизме тобу
Тизме топтору бир катар мазмунду көрсөтүү үчүн ийкемдүү жана күчтүү компонент болуп саналат. Өзгөртүү жана алардын ичиндеги бардык мазмунду колдоо үчүн кеңейтүү.
Негизги мисал
Эң негизги тизме тобу - тизме элементтери жана тийиштүү класстары бар иретсиз тизме. Аны кийинки варианттар менен же керек болсо өз CSS менен куруңуз.
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Төртүнчү пункт
- Жана бешинчи
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Активдүү заттар
Учурдагы активдүү тандоону көрсөтүү үчүн aга .active
кошуңуз ..list-group-item
- Активдүү нерсе
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Өчүрүлгөн нерселер
Өчүк болуп көрүнүү.disabled
үчүн aга кошуңуз . Кээ бир элементтерди чыкылдатуу окуяларын (мисалы, шилтемелер) толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScript талап кылынарын эске алыңыз..list-group-item
.disabled
- Өчүрүлгөн нерсе
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Шилтемелер жана баскычтар
Кошуу менен <a>
s же <button>
s колдонуңуз . Интерактивдүү эмес элементтерден турган тизме топтору (мисалы, s же s) чыкылдатууну же таптап алууну камсыз кылбасын камсыз кылуу үчүн бул псевдокласстарды бөлөбүз..list-group-item-action
<li>
<div>
Бул жерде стандарттык класстарды колдонбоңуз.btn
.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
s менен класстын ордуна атрибутун <button>
колдоно аласыз . Тилекке каршы, s disabled атрибутун колдобойт.disabled
.disabled
<a>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Flush
.list-group-flush
Тизме тобунун элементтерин ата-энелик контейнерде (мисалы, карталар) четинен четине көрсөтүү үчүн кээ бир чектерди жана тегеректелген бурчтарды алып салуу үчүн кошуңуз .
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Төртүнчү пункт
- Жана бешинчи
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Номерленген
Номерленген тизме тобунун элементтерине кошулуу үчүн модификатор классын кошуңуз .list-group-numbered
(жана кошумча элементти колдонуңуз ). <ol>
Сандар CSS аркылуу түзүлөт (a<ol>
Сандар тизме тобунун элементтеринин ичинде жакшыраак жайгаштыруу жана жакшыраак ыңгайлаштырууга мүмкүндүк берүү үчүн
Сандар генерацияланат counter-reset
, <ol>
андан кийин стилделет жана менен жана менен ::before
псевдо-элемент <li>
менен counter-increment
жайгаштырылат content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
Булар жеке мазмун менен да сонун иштешет.
-
Почта аталышыCras justo odio
-
Почта аталышыCras justo odio
-
Почта аталышыCras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Горизонталдуу
.list-group-horizontal
Тизме тобунун элементтеринин жайгашуусун вертикальдан горизонтальга бардык үзгүлтүккө учуратуу чекиттеринде өзгөртүү үчүн кошуу . .list-group-horizontal-{sm|md|lg|xl|xxl}
Же болбосо, ошол үзүү чекитинен баштап тизме тобун горизонталдуу кылуу үчүн жооп берүүчү вариантты тандаңыз min-width
. Учурда горизонталдуу тизме топторун таза тизме топтору менен айкалыштыруу мүмкүн эмес.
Кеңеш: горизонталдуу болгондо бирдей тууралыктагы тизме тобунун элементтерин каалайсызбы? .flex-fill
Ар бир тизмеге топко кошуу .
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
- Буюм
- Экинчи нерсе
- Үчүнчү нерсе
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Контексттик класстар
Тизме элементтерин фон жана түс менен стилдөө үчүн контексттик класстарды колдонуңуз.
- Жөнөкөй демейки тизме тобу элементи
- Жөнөкөй негизги тизме тобунун элементи
- Жөнөкөй кошумча тизме тобунун элементи
- Жөнөкөй ийгилик тизмеси топ пункту
- Жөнөкөй коркунуч тизмеси тобунун элементи
- Жөнөкөй эскертүү тизмеси тобунун элементи
- Жөнөкөй маалымат тизмеси тобу элементи
- Жөнөкөй жарык тизме тобунун элементи
- Жөнөкөй караңгы тизме тобунун элементи
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Контексттик класстар да менен иштешет .list-group-item-action
. Мурунку мисалда жок бул жердеги чапкыч стилдеринин кошулушун белгилеңиз. Ошондой эле мамлекет тарабынан колдоого алынат .active
; контексттик тизме тобунун элементинде активдүү тандоону көрсөтүү үчүн колдонуңуз.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Көмөкчү технологияларга маани берүү
Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hidden
класс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.
Белгилери менен
Кээ бир утилиталардын жардамы менен окула элек сандарды, аракеттерди жана башкаларды көрсөтүү үчүн тизменин каалаган тобуна бейджиктерди кошуңуз .
- Тизме элементи14
- Экинчи тизме элементи2
- Үчүнчү тизме элементи1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
Ыңгайлаштырылган мазмун
Flexbox утилиталарынын жардамы менен, төмөнкүдөй шилтемеленген тизме топторуна да дээрлик каалаган HTML кошуңуз .
Тизме тобунун аталышы
3 күн мурунАбзацтагы айрым толтуруучу мазмун.
Жана кээ бир кичинекей басуу.Тизме тобунун аталышы
3 күн мурунАбзацтагы айрым толтуруучу мазмун.
Ал эми кээ бир үнү басылган кичинекей тамгалар.Тизме тобунун аталышы
3 күн мурунАбзацтагы айрым толтуруучу мазмун.
Ал эми кээ бир үнү басылган кичинекей тамгалар.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Белгилөө кутучалары жана радиолор
Тизме тобунун элементтеринин ичинде Bootstrap'тын белги кутучаларын жана радиолорун коюп, керек болсо ыңгайлаштырыңыз. Аларды s жок колдонсоңуз болот , бирок жеткиликтүүлүк үчүн атрибутун жана маанисин <label>
кошууну унутпаңыз .aria-label
- Биринчи кутуча
- Экинчи кутуча
- Үчүнчү кутуча
- Төртүнчү кутуча
- Бешинчи кутуча
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
Жана эгер сиз <label>
s дегенди .list-group-item
чоң хит аймактар үчүн кааласаңыз, муну да жасай аласыз.
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
Sass
Өзгөрмөлөр
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
Миксиндер
s үчүн контексттик вариант класстарын$theme-colors
түзүү үчүн айкалышта колдонулат ..list-group-item
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
Loop
Миксин менен модификатор класстарын түзүүчү цикл list-group-item-variant()
.
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
JavaScript жүрүм-туруму
Таблетка JavaScript плагинин колдонуңуз — аны жекече же компиляцияланган bootstrap.js
файл аркылуу кошуңуз — жергиликтүү мазмундун өтмөктөр панелдерин түзүү үчүн тизме тобубузду кеңейтүү үчүн.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
Маалымат атрибуттарын колдонуу
data-bs-toggle="list"
Сиз жөн гана белгилөө же элемент боюнча эч кандай JavaScript жазбастан тизме тобунун навигациясын иштете аласыз . Бул маалымат атрибуттарын боюнча колдонуңуз .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
JavaScript аркылуу
JavaScript аркылуу табулатура тизме элементин иштетүү (ар бир тизме элементи өзүнчө активдештирилиши керек):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Сиз жеке тизме элементин бир нече жол менен активдештире аласыз:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Өнүгүү эффекти
Өтмөктөр панелинин өчүп калышы үчүн .fade
, ар бирине кошуңуз .tab-pane
. Биринчи өтмөк панели да .show
баштапкы мазмунду көрүнө бериши керек.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Методдор
constructor
Тизме элементинин элементин жана мазмун контейнерин иштетет. Өтмөктө DOMдагы контейнер түйүнү data-bs-target
же максаттуу болушу керек .href
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
Берилген тизме элементин тандап, ага байланышкан панелди көрсөтөт. Мурда тандалган каалаган башка тизме элементи тандоодон чыгарылат жана ага байланышкан панель жашырылат. Өтмөк панели иш жүзүндө көрсөтүлгөнгө чейин (мисалы, shown.bs.tab
окуя болгонго чейин) чалуучуга кайтат.
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Элементтин өтмөктү жок кылат.
getInstance
DOM элементи менен байланышкан өтмөк үлгүсүн алууга мүмкүндүк берген статикалык ыкма
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
DOM элементи менен байланышкан өтмөк үлгүсүн алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Окуялар
Жаңы өтмөктү көрсөткөндө, окуялар төмөнкү тартипте күйөт:
hide.bs.tab
(учурдагы активдүү өтмөктө)show.bs.tab
(көрсөтүлө турган өтмөктө)hidden.bs.tab
(мурунку активдүү өтмөктө,hide.bs.tab
окуяга окшош)shown.bs.tab
(жаңыдан активдүү болгон өтмөктө,show.bs.tab
окуяга окшош)
Эгер эч кандай өтмөк активдүү болбосо, hide.bs.tab
жана hidden.bs.tab
окуялар өчүрүлбөйт.
Окуя түрү | Description |
---|---|
show.bs.tab |
Бул окуя өтмөк көрсөтүүсүндө, бирок жаңы өтмөк көрсөтүлө электе башталат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
shown.bs.tab |
Бул окуя өтмөк көрсөтүлгөндөн кийин өтмөк көрсөтүүсүндө күйөт. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
hide.bs.tab |
Бул окуя жаңы өтмөк көрсөтүлө турганда (ошондуктан мурунку активдүү өтмөк жашырылганда) күйөт. Учурдагы жигердүү өтмөктү жана жакын арада активдүү боло турган жаңы өтмөктү максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
hidden.bs.tab |
Бул окуя жаңы өтмөк көрсөтүлгөндөн кийин башталат (ошентип мурунку активдүү өтмөк жашырылган). Мурунку активдүү өтмөктү жана жаңы активдүү өтмөктү максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}