Lista e grupit
Grupet e listave janë një komponent fleksibël dhe i fuqishëm për shfaqjen e një sërë përmbajtjesh. Modifikoni dhe zgjeroni ato për të mbështetur pothuajse çdo përmbajtje brenda.
Shembull themelor
Grupi më themelor i listës është një listë e parregulluar me artikuj të listës dhe klasat e duhura. Ndërtoni mbi të me opsionet që vijojnë, ose me CSS-në tuaj sipas nevojës.
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull i katërt
- Dhe një e pesta
<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>
Artikujt aktivë
Shto .active
në a .list-group-item
për të treguar përzgjedhjen aktuale aktive.
- Një artikull aktiv
- 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>
Artikuj me aftësi të kufizuara
Shto .disabled
në një .list-group-item
për ta bërë atë të duket e çaktivizuar. Vini re se disa elementë me .disabled
do të kërkojnë gjithashtu JavaScript të personalizuar për të çaktivizuar plotësisht ngjarjet e tyre të klikimeve (p.sh., lidhjet).
- Një artikull me aftësi të kufizuara
- 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>
Lidhjet dhe butonat
Përdorni <a>
s ose <button>
s për të krijuar artikuj të grupit të listës vepruese me gjendje pezullimi, të paaftë dhe aktive duke shtuar .list-group-item-action
. Ne i ndajmë këto pseudo-klasa për të siguruar që grupet e listave të përbëra nga elementë jo ndërveprues (si <li>
s ose <div>
s) të mos ofrojnë një klikim ose trokitje të përballueshme.
Sigurohuni që të mos përdorni .btn
klasat standarde këtu .
<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>
Me <button>
s, ju gjithashtu mund të përdorni disabled
atributin në vend të .disabled
klasës. Mjerisht, <a>
nuk e mbështet atributin e çaktivizuar.
<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
Shto .list-group-flush
për të hequr disa bordurë dhe qoshe të rrumbullakosura për t'i paraqitur artikujt e grupit të listës buzë në skaj në një kontejner prind (p.sh. kartat).
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull i katërt
- Dhe një e pesta
<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>
Të numëruara
Shtoni .list-group-numbered
klasën e modifikuesit (dhe përdorni opsionalisht një <ol>
element) për të zgjedhur artikujt e grupit të listës me numër. Numrat gjenerohen nëpërmjet CSS (në krahasim me <ol>
stilin e parazgjedhur të shfletuesit) për vendosje më të mirë brenda artikujve të grupit të listës dhe për të lejuar personalizim më të mirë.
Numrat gjenerohen nga counter-reset
në <ol>
, dhe më pas stilohen dhe vendosen me një ::before
pseudo-element në <li>
me counter-increment
dhe 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>
Këto funksionojnë shkëlqyeshëm edhe me përmbajtje të personalizuar.
-
NëntitulliCras justo odio
-
NëntitulliCras justo odio
-
NëntitulliCras 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>
Horizontale
Shto .list-group-horizontal
për të ndryshuar paraqitjen e artikujve të grupit të listës nga vertikale në horizontale në të gjitha pikat e ndërprerjes. Përndryshe, zgjidhni një variant të përgjegjshëm .list-group-horizontal-{sm|md|lg|xl|xxl}
për ta bërë një grup liste horizontale duke filluar në atë pikë ndërprerjeje min-width
. Aktualisht grupet horizontale të listës nuk mund të kombinohen me grupet e listave të rrafshuara.
Këshillë Pro: Dëshironi artikuj të grupit të listës me gjerësi të barabartë kur janë horizontale? Shtoni .flex-fill
në çdo artikull të grupit të listës.
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
- Një artikull
- Një artikull i dytë
- Një artikull i tretë
<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>
Klasat kontekstuale
Përdorni klasa kontekstuale për të stiluar artikujt e listës me një sfond dhe ngjyrë shtetërore.
- Një element i thjeshtë i grupit të paracaktuar të listës
- Një element i thjeshtë grupi i listës parësore
- Një element i thjeshtë grupi dytësor i listës
- Një artikull i thjeshtë grupi i listës së suksesit
- Një artikull i thjeshtë grupi i listës së rrezikut
- Një artikull i thjeshtë grupi i listës paralajmëruese
- Një artikull i thjeshtë grupi i listës së informacionit
- Një element i thjeshtë grupi i listës së dritës
- Një artikull i thjeshtë grupi i listës së errët
<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>
Klasat kontekstuale punojnë gjithashtu me .list-group-item-action
. Vini re shtimin e stileve hover këtu që nuk janë të pranishëm në shembullin e mëparshëm. Gjithashtu mbështetet edhe .active
shteti; zbatojeni atë për të treguar një përzgjedhje aktive në një artikull të grupit të listës kontekstuale.
<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>
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hidden
klasën.
Me distinktivë
Shtoni distinktivë në çdo artikull të grupit të listës për të shfaqur numërimin e palexuar, aktivitetin dhe më shumë me ndihmën e disa shërbimeve .
- Një artikull në listë14
- Një artikull i dytë i listës2
- Një artikull i tretë i listës1
<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>
Përmbajtje e personalizuar
Shtoni pothuajse çdo HTML brenda, edhe për grupet e listave të lidhura si ai më poshtë, me ndihmën e shërbimeve flexbox .
Lista e titullit të artikullit të grupit
3 dite mepareDisa përmbajtje mbajtëse vendesh në një paragraf.
Dhe disa shkronja të vogla.Lista e titullit të artikullit të grupit
3 dite mepareDisa përmbajtje mbajtëse vendesh në një paragraf.
Dhe disa shtypje të vogla të heshtura.Lista e titullit të artikullit të grupit
3 dite mepareDisa përmbajtje mbajtëse vendesh në një paragraf.
Dhe disa shtypje të vogla të heshtura.<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>
Kutitë e kontrollit dhe radiot
Vendosni kutitë e kontrollit dhe radiot e Bootstrap brenda artikujve të grupit të listës dhe personalizoni sipas nevojës. Mund t'i përdorni pa <label>
s, por mos harroni të përfshini një aria-label
atribut dhe vlerë për aksesueshmërinë.
- Kutia e parë e kontrollit
- Kutia e dytë e kontrollit
- Kutia e tretë e kontrollit
- Kutia e katërt e kontrollit
- Kutia e pestë e kontrollit
<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>
Dhe nëse doni <label>
s si zona të .list-group-item
mëdha të goditura, mund ta bëni edhe këtë.
<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
Variablat
$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;
Përzierjet
Përdoret në kombinim me $theme-colors
për të gjeneruar klasat e varianteve kontekstuale për .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;
}
}
}
}
Lak
Lak që gjeneron klasat e modifikuesve me list-group-item-variant()
miksin.
// 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);
}
Sjellja JavaScript
Përdorni shtojcën JavaScript të skedës—përfshijeni atë individualisht ose përmes bootstrap.js
skedarit të përpiluar—për të zgjeruar grupin tonë të listës për të krijuar panele tabelash të përmbajtjes lokale.
<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>
Përdorimi i atributeve të të dhënave
Ju mund të aktivizoni navigimin e grupit të listës pa shkruar ndonjë JavaScript thjesht duke specifikuar data-bs-toggle="list"
ose mbi një element. Përdorni këto atribute të dhënash në .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>
Përmes JavaScript
Aktivizo artikullin e listës me tabela përmes JavaScript (çdo artikull i listës duhet të aktivizohet individualisht):
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()
})
})
Ju mund të aktivizoni një artikull individual të listës në disa mënyra:
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
Efekti i zbehjes
Për ta bërë panelin e skedave të zbehet, shtojeni .fade
në secilin .tab-pane
. Paneli i parë i skedës duhet gjithashtu .show
të bëjë të dukshme përmbajtjen fillestare.
<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>
Metodat
constructor
Aktivizon një element të artikullit të listës dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-bs-target
ose një href
nyje kontejneri në 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>
shfaqje
Zgjedh artikullin e dhënë të listës dhe tregon panelin e lidhur me të. Çdo artikull tjetër i listës që është zgjedhur më parë bëhet i pazgjedhur dhe paneli i lidhur me të fshihet. Kthehet te thirrësi përpara se të shfaqet në të vërtetë paneli i skedës (për shembull, përpara se të shown.bs.tab
ndodhë ngjarja).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
disponoj
Shkatërron skedën e një elementi.
getInstance
Metoda statike e cila ju lejon të merrni shembullin e skedës së lidhur me një element DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metoda statike e cila ju lejon të merrni shembullin e skedës të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Ngjarjet
Kur shfaqet një skedë e re, ngjarjet shfaqen në rendin e mëposhtëm:
hide.bs.tab
(në skedën aktuale aktive)show.bs.tab
(në skedën që do të shfaqet)hidden.bs.tab
(në skedën e mëparshme aktive, e njëjta si përhide.bs.tab
ngjarjen)shown.bs.tab
(në skedën e saposhfaqur të sapoaktive, e njëjta si përshow.bs.tab
ngjarjen)
Nëse asnjë skedë nuk ishte tashmë aktive, hide.bs.tab
dhe hidden.bs.tab
ngjarjet nuk do të hapen.
Lloji i ngjarjes | Përshkrim |
---|---|
show.bs.tab |
Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet). |
shown.bs.tab |
Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet). |
hide.bs.tab |
Kjo ngjarje ndizet kur duhet të shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive duhet të fshihet). Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktuale aktive dhe skedën e re që do të aktivizohet së shpejti. |
hidden.bs.tab |
Kjo ngjarje ndizet pasi shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive fshihet). Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën e mëparshme aktive dhe skedën e re aktive. |
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
})
}