Lista tal-grupp
Gruppi tal-lista huma komponent flessibbli u b'saħħtu għall-wiri ta 'serje ta' kontenut. Immodifika u estendihom biex jappoġġjaw kważi kull kontenut ġewwa.
Eżempju bażiku
L-aktar grupp ta 'lista bażika huwa lista mhux ordnata b'oġġetti tal-lista u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew bis-CSS tiegħek kif meħtieġ.
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Oġġetti attivi
Żid .active
ma 'a .list-group-item
biex tindika l-għażla attiva attwali.
- Oġġett attiv
- 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>
Oġġetti b'diżabilità
Żid .disabled
ma ' .list-group-item
biex tidher b'diżabilità. Innota li xi elementi .disabled
b'se jeħtieġu wkoll JavaScript personalizzat biex jiskonnettjaw bis-sħiħ l-avvenimenti tal-ikklikkja tagħhom (eż., links).
- Oġġett b'diżabilità
- 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>
Links u buttuni
Uża <a>
s jew <button>
s biex toħloq oġġetti ta' grupp ta' lista azzjonabbli bi stati hover, diżabilitati u attivi billi żżid .list-group-item-action
. Aħna nisseparaw dawn il-psewdo-klassijiet biex niżguraw li l-gruppi tal-lista magħmula minn elementi mhux interattivi (bħal <li>
s jew <div>
s) ma jipprovdux affordance ta' klikk jew vit.
Kun żgur li ma tużax il- .btn
klassijiet standard hawn .
<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
B <button>
's, tista' wkoll tagħmel użu mill- disabled
attribut minflok il- .disabled
klassi. Sfortunatament, <a>
s ma jappoġġjawx l-attribut diżabbli.
<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>
Aħsel
Żid .list-group-flush
biex tneħħi xi fruntieri u kantunieri fit-tond biex tirrendi oġġetti tal-grupp tal-lista tarf sa tarf f'kontenitur prinċipali (eż. karti).
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Ir-raba' oġġett
- U l-ħames waħda
<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>
Numerati
Żid il- .list-group-numbered
klassi modifikatur (u b'għażla uża <ol>
element) biex tagħżel oġġetti tal-grupp tal-lista numerata. In-numri huma ġġenerati permezz tas-CSS (għall-kuntrarju tal- <ol>
grafika default tal-brawżer) għal tqegħid aħjar ġewwa l-oġġetti tal-grupp tal-lista u biex jippermettu adattament aħjar.
In-numri huma ġġenerati minn counter-reset
fuq il- <ol>
, u mbagħad stil u mqiegħda bi ::before
psewdo-element fuq il- <li>
ma ' counter-increment
u content
.
- Oġġett tal-lista
- Oġġett tal-lista
- Oġġett tal-lista
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
Dawn jaħdmu tajjeb ukoll b'kontenut tad-dwana.
-
SubtitluKontenut għall-oġġett tal-lista
-
SubtitluKontenut għall-oġġett tal-lista
-
SubtitluKontenut għall-oġġett tal-lista
<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>
Content for list item
</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>
Content for list item
</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>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Orizzontali
Żid .list-group-horizontal
biex tibdel it-tqassim tal-oġġetti tal-grupp tal-lista minn vertikali għal orizzontali fil-punti ta' waqfien kollha. Inkella, agħżel varjant li jirrispondu .list-group-horizontal-{sm|md|lg|xl|xxl}
biex tagħmel grupp ta' lista orizzontali li jibda minn dak il-punt ta' waqfien min-width
. Attwalment il-gruppi ta' lista orizzontali ma jistgħux jiġu kkombinati ma' gruppi ta' lista ta' flush.
ProTip: Trid oġġetti tal-grupp tal-lista ta 'wisa' ugwali meta orizzontali? Żid .flex-fill
ma' kull oġġett tal-grupp tal-lista.
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
- Oġġett
- It-tieni oġġett
- It-tielet oġġett
<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>
Klassijiet kuntestwali
Uża klassijiet kuntestwali biex tfassal oġġetti tal-lista bi sfond u kulur stateful.
- Oġġett sempliċi tal-grupp tal-lista default
- Oġġett sempliċi tal-grupp tal-lista primarja
- Oġġett sempliċi tal-grupp tal-lista sekondarja
- Oġġett sempliċi tal-grupp tal-lista tas-suċċess
- Oġġett sempliċi tal-grupp tal-lista tal-periklu
- Oġġett ta' grupp ta' lista ta' twissija sempliċi
- Oġġett sempliċi ta' grupp ta' lista ta' informazzjoni
- Oġġett sempliċi tal-grupp tal-lista tad-dawl
- Oġġett sempliċi tal-grupp tal-lista skura
<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>
Il-klassijiet kuntestwali jaħdmu wkoll ma' .list-group-item-action
. Innota ż-żieda tal-istili tal-hover hawn mhux preżenti fl-eżempju preċedenti. Sostnut ukoll l- .active
istat; applikaha biex tindika għażla attiva fuq oġġett tal-grupp tal-lista kuntestwali.
<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>
Twassal tifsira għal teknoloġiji ta' assistenza
L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta’ teknoloġiji ta’ assistenza – bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .visually-hidden
klassi.
Bil badges
Żid badges ma 'kwalunkwe oġġett tal-grupp tal-lista biex turi għadd mhux moqrija, attività, u aktar bl-għajnuna ta' xi utilitajiet .
- Oġġett tal-lista14
- It-tieni oġġett tal-lista2
- It-tielet oġġett tal-lista1
<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>
Kontenut apposta
Żid kważi kull HTML fi ħdan, anke għal gruppi ta 'lista konnessi bħal dak ta' hawn taħt, bl-għajnuna ta ' utilitajiet flexbox .
Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira.Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira siekta.Elenka l-intestatura tal-oġġett tal-grupp
3 ijiem iluXi kontenut ta' placeholder f'paragrafu.
U xi stampa żgħira siekta.<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>
Checkboxes u radjijiet
Poġġi l-kaxxi ta' kontroll u r-radjijiet ta' Bootstrap fi ħdan il-lista ta' oġġetti tal-grupp u ppersonalizza kif meħtieġ. Tista' tużahom mingħajr <label>
s, imma jekk jogħġbok ftakar li tinkludi aria-label
attribut u valur għall-aċċessibbiltà.
- L-ewwel checkbox
- It-tieni checkbox
- It-tielet checkbox
- Ir-raba' checkbox
- Il-ħames checkbox
<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>
U jekk trid <label>
s bħala l .list-group-item
għal żoni kbar hit, inti tista 'tagħmel dan, wisq.
<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
Varjabbli
$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;
Mixins
Użat flimkien ma $theme-colors
' biex jiġġenera l -klassijiet varjanti kuntestwali għal .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;
}
}
}
}
Loop
Loop li jiġġenera l-klassijiet modifikaturi bil- list-group-item-variant()
mixin.
// 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);
}
Imġieba JavaScript
Uża t-tab JavaScript plugin—inkludih individwalment jew permezz tal- bootstrap.js
fajl ikkumpilat—biex testendi l-grupp tal-lista tagħna biex toħloq panewijiet tabbable ta' kontenut lokali.
<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>
L-użu ta' attributi tad-data
Tista' tattiva navigazzjoni ta' grupp ta' lista mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-bs-toggle="list"
jew fuq element. Uża dawn l-attributi tad-dejta fuq .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>
Via JavaScript
Ippermetti l-oġġett tal-lista li jista' jittabx permezz ta' JavaScript (kull oġġett tal-lista jeħtieġ li jiġi attivat individwalment):
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()
})
})
Tista' tattiva oġġett tal-lista individwali f'diversi modi:
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
Effett fade
Biex tagħmel tabs panel fade in, żid .fade
ma 'kull .tab-pane
. L-ewwel pannell tat-tab irid ikollu wkoll .show
jagħmel il-kontenut inizjali viżibbli.
<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>
Metodi
constructor
Jattiva element ta' oġġett tal-lista u kontenitur tal-kontenut. Tab għandu jkollha jew a data-bs-target
jew href
node ta 'kontenitur fil-mira fid-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>
juru
Jagħżel l-oġġett tal-lista mogħtija u juri l-panew assoċjat tiegħu. Kwalunkwe oġġett ieħor tal-lista li kien magħżul qabel ma jintgħażel u l-ħġieġa assoċjata tagħha hija moħbija. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (per eżempju, qabel ma shown.bs.tab
jseħħ l-avveniment).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
jiddisponi
Jeqred tab ta' element.
getInstance
Metodu statiku li jippermettilek li tikseb l-istanza tat-tab assoċjata ma 'element DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metodu statiku li jippermettilek li tikseb l-istanza tat-tab assoċjata ma 'element DOM, jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Avvenimenti
Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:
hide.bs.tab
(fuq it-tab attiva attwali)show.bs.tab
(fuq it-tab li trid tintwera)hidden.bs.tab
(fuq it-tab attiva preċedenti, l-istess bħal għall-hide.bs.tab
avveniment)shown.bs.tab
(fuq it-tab li għadha kif intwera, l-istess bħal dik tal-show.bs.tab
avveniment)
Jekk l-ebda tab ma kienet diġà attiva, l- avvenimenti hide.bs.tab
u hidden.bs.tab
mhux se jiġu sparati.
Tip ta' avveniment | Deskrizzjoni |
---|---|
show.bs.tab |
Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
shown.bs.tab |
Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
hide.bs.tab |
Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.target u event.relatedTarget biex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament. |
hidden.bs.tab |
Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.target u event.relatedTarget biex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament. |
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
})
}