Zerrenda taldea
Zerrenda-taldeak osagai malgu eta indartsuak dira eduki sorta bat bistaratzeko. Aldatu eta hedatu ia edozein eduki onartzeko.
Oinarrizko adibidea
Zerrenda talde oinarrizkoena ordenatu gabeko zerrenda bat da, zerrendako elementuekin eta klase egokiekin. Eraiki ezazu ondoko aukerekin, edo zure CSSarekin behar duzunean.
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Laugarren elementu bat
- Eta bosgarren bat
<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>
Elementu aktiboak
Gehitu .active
a .list-group-item
-ri uneko hautapen aktiboa adierazteko.
- Elementu aktibo bat
- 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>
Desgaitutako elementuak
Gehitu .disabled
a- .list-group-item
ri desgaituta agertzeko . Kontuan izan elementu batzuek .disabled
JavaScript pertsonalizatua ere beharko dutela klik-gertaerak guztiz desgaitzeko (adibidez, estekak).
- Desgaitutako elementu bat
- 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>
Estekak eta botoiak
Erabili <a>
s edo <button>
s zerrendako talde-elementuak pasatzeko, desgaituta eta aktibo dauden egoerak sortzeko, gehituz.list-group-item-action
. Sasi-klase hauek bereizten ditugu elementu ez-interaktiboez osatutako zerrenda-taldeek ( <li>
s edo <div>
s bezalakoak) ez dutela klik edo ukipen affordagarririk ematen ziurtatzeko.
Ziurtatu ez dituzula hemen klase estandarrak erabiltzen.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- rekin , klasearen ordez atributua <button>
ere erabil dezakezu . Zoritxarrez, s-k ez du onartzen desgaitutako atributua.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>
Hustu
Gehitu .list-group-flush
ertz eta ertz biribildu batzuk kentzeko zerrenda-taldearen elementuak ertz-ertz errendatzeko edukiontzi nagusi batean (adibidez, txartelak).
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Laugarren elementu bat
- Eta bosgarren bat
<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>
Zenbakituta
Gehitu .list-group-numbered
modifikatzaile klasea (eta, aukeran, erabili <ol>
elementu bat) zenbakidun zerrendako talde-elementuak aukeratzeko. Zenbakiak CSS bidez sortzen dira ( <ol>
arakatzailearen estilo lehenetsiaren aldean) zerrendako elementuen barruan hobeto kokatzeko eta pertsonalizazio hobea ahalbidetzeko.
Zenbakiak erabiliz sortzen dira counter-reset
, <ol>
eta, ondoren, estiloarekin eta ::before
sasi-elementu <li>
batekin counter-increment
jartzen dira 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>
Hauek oso ondo funtzionatzen dute eduki pertsonalizatuarekin ere.
-
AzpitituluaCras justo odio
-
AzpitituluaCras justo odio
-
AzpitituluaCras 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>
Horizontala
Gehitu .list-group-horizontal
zerrenda-taldeko elementuen diseinua bertikaletik horizontalera aldatzeko eten puntu guztietan. Bestela, aukeratu aldaera sentikor .list-group-horizontal-{sm|md|lg|xl|xxl}
bat zerrenda-talde bat horizontal bihurtzeko eten-puntu horretan hasita min-width
. Une honetan zerrenda-talde horizontalak ezin dira konbinatu zerrenda-talde hutsekin.
Aholkua: zabalera berdineko zerrendako talde-elementuak nahi dituzu horizontalean? Gehitu .flex-fill
zerrenda taldeko elementu bakoitzari.
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
- Elementu bat
- Bigarren elementu bat
- Hirugarren elementu bat
<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>
Testuinguruko klaseak
Erabili testuinguru-klaseak zerrendako elementuak atzeko planoa eta kolorea duten estiloa jartzeko.
- Zerrendako talde-elementu lehenetsi sinplea
- Zerrenda talde nagusiko elementu sinple bat
- Bigarren mailako zerrenda taldeko elementu sinple bat
- Arrakasta-zerrendako talde-elementu sinple bat
- Arrisku zerrendako talde-elementu sinple bat
- Abisu-zerrendako talde-elementu sinple bat
- Informazio-zerrendako talde-elementu sinple bat
- Argi-zerrenda talde-elementu sinple bat
- Zerrenda iluneko talde-elementu sinple bat
<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>
Testuinguruko klaseek ere lan egiten dute .list-group-item-action
. Kontuan izan aurreko adibidean ez dauden pasabide-estiloen gehitzea. Estatua ere onartzen da .active
; aplikatu ezazu hautapen aktibo bat adierazteko testuinguru-zerrendako talde-elementu batean.
<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>
Laguntza-teknologiei esanahia ematea
Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hidden
klasearekin ezkutatuta dagoen testu gehigarria.
Txapekin
Gehitu bereizgarriak zerrendako edozein elementuri irakurri gabeko zenbaketak, jarduerak eta gehiago erakusteko utilitate batzuen laguntzarekin .
- Zerrendako elementu bat14
- Bigarren zerrendako elementu bat2
- Hirugarren zerrendako elementu bat1
<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>
Eduki pertsonalizatuak
Gehitu ia edozein HTML barruan, baita estekatutako zerrenda taldeetarako ere, behean dagoena bezalakoa, flexbox utilitateen laguntzarekin .
Zerrenda taldeko elementuen goiburua
duela 3 egunParagrafo bateko leku-markaren eduki batzuk.
Eta letra txiki batzuk.Zerrenda taldeko elementuen goiburua
duela 3 egunParagrafo bateko leku-markaren eduki batzuk.
Eta letra txiki isildu batzuk.Zerrenda taldeko elementuen goiburua
duela 3 egunParagrafo bateko leku-markaren eduki batzuk.
Eta letra txiki isildu batzuk.<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>
Koadroak eta irratiak
Jarri Bootstrap-en kontrol-laukiak eta irratiak zerrendako elementuen barruan eta pertsonalizatu behar den moduan. S- rik gabe erabil ditzakezu <label>
, baina gogoratu aria-label
irisgarritasunerako atributu eta balio bat sartzen duzula.
- Lehenengo kontrol-laukia
- Bigarren kontrol-laukia
- Hirugarren kontrol-laukia
- Laugarren kontrol-laukia
- Bosgarren kontrol-laukia
<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>
Eta hit eremu handietarako <label>
s gisa nahi baduzu , hori ere egin dezakezu..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
Aldagaiak
$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;
Mixinak
S -rako testuinguru-aldaera-klaseak$theme-colors
sortzeko konbinatuta erabiltzen da ..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;
}
}
}
}
Begizta
list-group-item-variant()
Mixin -arekin modifikatzaile-klaseak sortzen dituen begizta.
// 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 portaera
Erabili fitxa JavaScript plugina —sartu banan-banan edo konpilatutako bootstrap.js
fitxategiaren bidez— gure zerrenda taldea zabaltzeko tokiko edukiaren fitxa-panelak sortzeko.
<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>
Datu-atributuak erabiltzea
Zerrenda taldeen nabigazioa aktiba dezakezu JavaScript idatzi gabe data-bs-toggle="list"
edo elementu batean zehaztuta. Erabili datu-atributu hauek .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 bidez
Gaitu tabulatzeko zerrendako elementua JavaScript bidez (zerrendako elementu bakoitza banan-banan aktibatu behar da):
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()
})
})
Banakako zerrendako elementua hainbat modutara aktiba dezakezu:
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
Desagertzeko efektua
Fitxen panela desagertzeko, gehitu .fade
bakoitzari .tab-pane
. Lehen fitxa-panelak .show
hasierako edukia ikusgai jarri behar du.
<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>
Metodoak
constructor
Zerrendako elementuaren elementu eta eduki-edukiontzi bat aktibatzen du. Tabulak DOM-eko edukiontzi-nodo bat izan behar data-bs-target
du 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>
erakutsi
Emandako zerrendako elementua hautatzen du eta hari lotutako panela erakusten du. Aurretik hautatutako zerrendako beste edozein elementu hautatu gabe geratzen da eta hari lotutako panela ezkutatu egiten da. Deitzailearengana itzultzen da fitxa-panela benetan erakutsi baino lehen (adibidez, shown.bs.tab
gertaera gertatu aurretik).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
bota
Elementu baten fitxa suntsitzen du.
getInstance
Metodo estatikoa DOM elementu batekin lotutako fitxa-instantzia lortzeko aukera ematen duena
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metodo estatikoa , DOM elementu batekin lotutako fitxa-instantzia lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Gertaerak
Fitxa berri bat erakustean, gertaerak ordena honetan piztuko dira:
hide.bs.tab
(uneko fitxa aktiboan)show.bs.tab
(Erakutsi beharreko fitxan)hidden.bs.tab
(aurreko fitxa aktiboan, ekitaldiaren berdinahide.bs.tab
)shown.bs.tab
(Aktibatu berri den fitxan, ekitaldiaren berdinashow.bs.tab
)
Ez bazegoen fitxa aktiborik, hide.bs.tab
eta hidden.bs.tab
gertaerak ez dira abiaraziko.
Gertaera mota | Deskribapena |
---|---|
show.bs.tab |
Gertaera hau fitxen erakustaldian abiarazten da, baina fitxa berria erakutsi aurretik. Erabili event.target eta event.relatedTarget fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren. |
shown.bs.tab |
Gertaera hau fitxen erakustaldian abiarazten da fitxa bat erakutsi ondoren. Erabili event.target eta event.relatedTarget fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren. |
hide.bs.tab |
Gertaera hau fitxa berri bat erakutsi nahi denean abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu behar da). Erabili event.target eta event.relatedTarget uneko fitxa aktibora eta laster aktibo egongo den fitxa berria bideratzeko, hurrenez hurren. |
hidden.bs.tab |
Gertaera hau fitxa berri bat erakutsi ondoren abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu egiten da). Erabili event.target eta event.relatedTarget aurreko fitxa aktibora eta fitxa aktibo berria bideratzeko, hurrenez hurren. |
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
})
}