Listahan ng pangkat
Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita ng isang serye ng nilalaman. Baguhin at palawigin ang mga ito upang suportahan ang halos anumang nilalaman sa loob.
Pangunahing halimbawa
Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga listahan ng mga item at mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o gamit ang iyong sariling CSS kung kinakailangan.
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Pang-apat na item
- At ang panglima
<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>
Mga aktibong item
Idagdag .active
sa a .list-group-item
upang isaad ang kasalukuyang aktibong pagpili.
- Isang aktibong item
- Ang pangalawang item
- Pangatlong item
- Pang-apat na item
- At ang panglima
<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>
Mga item na hindi pinagana
Idagdag .disabled
sa isang .list-group-item
para magmukhang hindi pinagana. Tandaan na ang ilang elementong may .disabled
ay mangangailangan din ng custom na JavaScript upang ganap na hindi paganahin ang kanilang mga kaganapan sa pag-click (hal, mga link).
- Isang item na hindi pinagana
- Ang pangalawang item
- Pangatlong item
- Pang-apat na item
- At ang panglima
<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>
Mga link at mga pindutan
Gumamit ng <a>
s o <button>
s upang lumikha ng mga naaaksyunan na item ng pangkat ng listahan na may hover, naka-disable, at mga aktibong estado sa pamamagitan ng pagdaragdag ng .list-group-item-action
. Pinaghihiwalay namin ang mga pseudo-class na ito upang matiyak na ang mga pangkat ng listahan na gawa sa mga hindi interactive na elemento (tulad ng mga <li>
s o <div>
s) ay hindi nagbibigay ng isang click o tap affordance.
Tiyaking hindi gagamitin ang mga karaniwang .btn
klase dito .
<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>
Sa <button>
s, maaari mo ring gamitin ang disabled
katangian sa halip na ang .disabled
klase. Nakalulungkot, <a>
hindi sinusuportahan ng s ang hindi pinaganang katangian.
<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
Idagdag .list-group-flush
upang alisin ang ilang mga hangganan at mga bilugan na sulok upang i-render ang mga item ng listahan ng pangkat na magkatabi sa isang parent na lalagyan (hal, mga card).
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Pang-apat na item
- At ang panglima
<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>
May numero
Idagdag ang .list-group-numbered
klase ng modifier (at opsyonal na gumamit ng <ol>
elemento) para mag-opt in sa mga item ng pangkat na may bilang na listahan. Binubuo ang mga numero sa pamamagitan ng CSS (kumpara sa <ol>
default na pag-istilo ng browser) para sa mas mahusay na pagkakalagay sa loob ng mga item ng listahan ng pangkat at upang payagan ang mas mahusay na pag-customize.
Binubuo ang mga numero sa pamamagitan ng counter-reset
on the <ol>
, at pagkatapos ay i-istilo at inilagay na may ::before
pseudo-element sa <li>
may counter-increment
at 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>
Ang mga ito ay mahusay na gumagana sa custom na nilalaman pati na rin.
-
SubheadingCras justo odio
-
SubheadingCras justo odio
-
SubheadingCras 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>
Pahalang
Idagdag .list-group-horizontal
upang baguhin ang layout ng mga item ng pangkat ng listahan mula patayo patungo sa pahalang sa lahat ng breakpoint. Bilang kahalili, pumili ng tumutugong variant .list-group-horizontal-{sm|md|lg|xl|xxl}
upang gawing pahalang ang isang pangkat ng listahan simula sa breakpoint na iyon min-width
. Sa kasalukuyan , ang mga pahalang na pangkat ng listahan ay hindi maaaring isama sa mga flush na pangkat ng listahan.
ProTip: Gusto ng pantay na lapad ng mga item ng pangkat ng listahan kapag pahalang? Idagdag .flex-fill
sa bawat item sa listahan ng pangkat.
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Isang bagay
- Ang pangalawang item
- Pangatlong item
- Isang bagay
- Ang pangalawang item
- Pangatlong item
<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>
Mga klase sa konteksto
Gumamit ng mga kontekstwal na klase upang i-istilo ang mga item sa listahan na may stateful na background at kulay.
- Isang simpleng default na item ng pangkat ng listahan
- Isang simpleng pangunahing item ng pangkat ng listahan
- Isang simpleng pangalawang item ng pangkat ng listahan
- Isang simpleng item ng pangkat ng listahan ng tagumpay
- Isang simpleng item ng pangkat ng listahan ng panganib
- Isang simpleng item ng pangkat ng listahan ng babala
- Isang simpleng item ng pangkat ng listahan ng impormasyon
- Isang simpleng light list group item
- Isang simpleng item ng dark list group
<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>
Gumagana rin ang mga klase sa konteksto ng .list-group-item-action
. Pansinin ang pagdaragdag ng mga istilo ng hover dito na wala sa nakaraang halimbawa. Sinusuportahan din ang .active
estado; ilapat ito upang ipahiwatig ang isang aktibong pagpili sa isang item ng pangkat ng listahan ng konteksto.
<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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hidden
klase.
May mga badge
Magdagdag ng mga badge sa anumang item sa listahan ng pangkat upang ipakita ang mga hindi pa nababasang bilang, aktibidad, at higit pa sa tulong ng ilang mga utility .
- Isang item sa listahan14
- Ang pangalawang item sa listahan2
- Ang ikatlong item sa listahan1
<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>
Custom na nilalaman
Magdagdag ng halos anumang HTML sa loob, kahit para sa mga naka-link na grupo ng listahan tulad ng nasa ibaba, sa tulong ng mga flexbox utilities .
Ilista ang heading ng item ng pangkat
3 araw ang nakalipasIlang placeholder na nilalaman sa isang talata.
At ilang maliit na letra.Ilista ang heading ng item ng pangkat
3 araw ang nakalipasIlang placeholder na nilalaman sa isang talata.
At ilang naka-mute na maliit na letra.Ilista ang heading ng item ng pangkat
3 araw ang nakalipasIlang placeholder na nilalaman sa isang talata.
At ilang naka-mute na maliit na letra.<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>
Mga checkbox at radyo
Ilagay ang mga checkbox at radyo ng Bootstrap sa loob ng listahan ng mga item ng pangkat at i-customize kung kinakailangan. Maaari mong gamitin ang mga ito nang walang <label>
s, ngunit mangyaring tandaan na magsama ng isang aria-label
katangian at halaga para sa pagiging naa-access.
- Unang checkbox
- Pangalawang checkbox
- Pangatlong checkbox
- Ikaapat na checkbox
- Ikalimang 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>
At kung gusto mo ang <label>
s bilang .list-group-item
para sa malalaking lugar ng hit, magagawa mo rin iyon.
<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
Mga variable
$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
Ginagamit kasabay $theme-colors
ng upang bumuo ng mga klase ng variant ng konteksto para sa .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 na bumubuo ng mga klase ng modifier gamit ang 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);
}
Pag-uugali ng JavaScript
Gamitin ang plugin ng tab na JavaScript—isama ito nang isa-isa o sa pamamagitan ng pinagsama bootstrap.js
-samang file—upang palawigin ang aming pangkat ng listahan upang lumikha ng mga tabable na pane ng lokal na nilalaman.
<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>
Paggamit ng mga katangian ng data
Maaari mong i-activate ang isang nabigasyon ng pangkat ng listahan nang hindi nagsusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-bs-toggle="list"
o sa isang elemento. Gamitin ang mga katangian ng data na ito sa .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>
Sa pamamagitan ng JavaScript
Paganahin ang item sa listahan ng tabable sa pamamagitan ng JavaScript (kailangang isa-isang isaaktibo ang bawat item sa listahan):
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()
})
})
Maaari mong i-activate ang indibidwal na item sa listahan sa maraming paraan:
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 effect
Upang gawing fade in ang panel ng mga tab, idagdag .fade
sa bawat isa .tab-pane
. Ang unang tab pane ay dapat ding .show
gawin ang unang nilalaman na nakikita.
<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>
Paraan
constructor
Nag-a-activate ng elemento ng item sa listahan at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-bs-target
o isang pag- href
target ng isang container node sa 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>
palabas
Pinipili ang ibinigay na item sa listahan at ipinapakita ang nauugnay na pane nito. Ang anumang iba pang item sa listahan na dati nang napili ay hindi mapipili at ang nauugnay na pane nito ay nakatago. Bumabalik sa tumatawag bago aktwal na naipakita ang tab pane (halimbawa, bago shown.bs.tab
mangyari ang kaganapan).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
itapon
Sinisira ang tab ng isang elemento.
getInstance
Static na paraan na nagbibigay-daan sa iyong makuha ang tab na instance na nauugnay sa isang elemento ng DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Static na paraan na nagbibigay-daan sa iyong makuha ang instance ng tab na nauugnay sa isang elemento ng DOM, o gumawa ng bago kung sakaling hindi ito nasimulan
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Mga kaganapan
Kapag nagpapakita ng bagong tab, gagana ang mga kaganapan sa sumusunod na pagkakasunud-sunod:
hide.bs.tab
(sa kasalukuyang aktibong tab)show.bs.tab
(sa ipapakitang tab)hidden.bs.tab
(sa nakaraang aktibong tab, kapareho ng para sahide.bs.tab
kaganapan)shown.bs.tab
(sa bagong-aktibong kakapakitang tab, kapareho ng para sashow.bs.tab
kaganapan)
Kung wala pang tab na aktibo, ang hide.bs.tab
at mga hidden.bs.tab
kaganapan ay hindi papaganahin.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.tab |
Ang kaganapang ito ay gumagana sa palabas sa tab, ngunit bago ipakita ang bagong tab. Gamitin event.target at event.relatedTarget i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit. |
shown.bs.tab |
Ang kaganapang ito ay gagana sa palabas sa tab pagkatapos maipakita ang isang tab. Gamitin event.target at event.relatedTarget i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit. |
hide.bs.tab |
Ang kaganapang ito ay gagana kapag ang isang bagong tab ay ipapakita (at sa gayon ang nakaraang aktibong tab ay itatago). Gamitin event.target at event.relatedTarget i-target ang kasalukuyang aktibong tab at ang bagong tab na malapit nang maging aktibo, ayon sa pagkakabanggit. |
hidden.bs.tab |
Ang kaganapang ito ay gagana pagkatapos ipakita ang isang bagong tab (at sa gayon ang nakaraang aktibong tab ay nakatago). Gamitin event.target at event.relatedTarget i-target ang nakaraang aktibong tab at ang bagong aktibong tab, ayon sa pagkakabanggit. |
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
})
}