Спіс групы
Групы спісаў - гэта гнуткі і магутны кампанент для адлюстравання серыі кантэнту. Змяняйце і пашырайце іх для падтрымкі практычна любога змесціва.
Базавы прыклад
Самая базавая група спісаў - гэта неўпарадкаваны спіс з элементамі спісу і адпаведнымі класамі. Абапірайцеся на яго з наступнымі параметрамі або з вашым уласным 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>
Актыўныя элементы
Дадайце .active
да a .list-group-item
, каб пазначыць бягучы актыўны выбар.
- Актыўны элемент
- Другі пункт
- Трэці пункт
- Чацвёрты пункт
- І пяты
<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 .list-group-item
, каб ён выглядаў адключаным. Звярніце ўвагу, што некаторым элементам .disabled
таксама спатрэбіцца карыстальніцкі JavaScript для поўнага адключэння падзей пстрычак (напрыклад, спасылак).
- Адключаны элемент
- Другі пункт
- Трэці пункт
- Чацвёрты пункт
- І пяты
<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 для стварэння дзейных элементаў спісаў са станамі навядзення, адключанага і актыўнага, дадаўшы .list-group-item-action
. Мы падзяляем гэтыя псеўдакласы, каб пераканацца, што групы спісаў, якія складаюцца з неінтэрактыўных элементаў (напрыклад, <li>
s або <div>
s), не забяспечваюць магчымасці націскання або націскання.
Не выкарыстоўвайце тут стандартныя .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>
З дапамогай <button>
s вы таксама можаце выкарыстоўваць disabled
атрыбут замест .disabled
класа. На жаль, <a>
s не падтрымлівае атрыбут disabled.
<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>
Прамыць
Дадайце .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 (у адрозненне ад <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>
Індывідуальны кантэнт
Дадайце практычна любы HTML унутры, нават для груп звязаных спісаў, такіх як прыведзены ніжэй, з дапамогай утыліт flexbox .
Загаловак элемента спісу групы
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 у элементах групы спісаў і наладзьце па меры неабходнасці. Вы можаце выкарыстоўваць іх без <label>
s, але не забудзьцеся ўключыць 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>
Сас
Пераменныя
$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;
Міксіны
Выкарыстоўваецца ў спалучэнні з $theme-colors
для стварэння класаў кантэкстных варыянтаў для .list-group-item
s.
@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;
}
}
}
}
Пятля
Цыкл, які стварае класы-мадыфікатары з дапамогай 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>
Выкарыстанне атрыбутаў дадзеных
Вы можаце актываваць навігацыю па групах спісаў без напісання JavaScript, проста ўказаўшы data-bs-toggle="list"
або на элеменце. Выкарыстоўвайце гэтыя атрыбуты дадзеных на .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
Актывуе элемент спісу і кантэйнер ��месціва. На ўкладцы павінна быць альбо data-bs-target
або, href
арыентаванае на вузел кантэйнера ў DOM.
<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>
паказаць
Выбірае дадзены элемент спісу і паказвае звязаную з ім панэль. Любы іншы элемент спіса, які быў выбраны раней, становіцца невыбраным, а звязаная з ім панэль схавана. Вяртаецца да абанента да таго, як панэль укладак была фактычна паказана (напрыклад, да shown.bs.tab
падзеі).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
распараджацца
Знішчае ўкладку элемента.
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
не будуць запушчаны.
Тып падзеі | Апісанне |
---|---|
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
})
}