Lembani gulu
Magulu amndandanda ndi gawo losinthika komanso lamphamvu powonetsa mndandanda wazinthu. Sinthani ndi kukulitsa kuti zithandizire chilichonse mkati.
Chitsanzo choyambirira
Gulu la mndandanda wofunikira kwambiri ndi mndandanda wosasankhidwa wokhala ndi mndandanda wazinthu ndi makalasi oyenera. Mangani pa izo ndi zosankha zomwe zikutsatira, kapena ndi CSS yanu ngati pakufunika.
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu chachinayi
- Ndipo wachisanu
<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>
Zinthu zogwira ntchito
Onjezani .active
ku a .list-group-item
kuti muwonetse zomwe zasankhidwa.
- Chinthu chogwira ntchito
- 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>
Zinthu zolemala
Onjezani .disabled
ku a .list-group-item
kuti iwoneke ngati yoyimitsa. Dziwani kuti zinthu zina zomwe zili nazo .disabled
zidzafunikanso JavaScript yokhazikika kuti izimitsa zochitika zawo zodina (mwachitsanzo, maulalo).
- Chinthu cholemala
- 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>
Maulalo ndi mabatani
Gwiritsani ntchito <a>
s kapena <button>
s kuti mupange mndandanda wazinthu zomwe zingachitike m'magulu okhala ndi ma hover, olemala, ndi omwe akugwira ntchito powonjezera .list-group-item-action
. Timalekanitsa magulu abodzawa kuti tiwonetsetse kuti magulu opangidwa ndi zinthu zosalumikizana (monga <li>
s kapena <div>
s) sapereka kudina kapena kukwanitsa.
Onetsetsani kuti musagwiritse ntchito .btn
makalasi okhazikika apa .
<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>
Ndi <button>
s, mutha kugwiritsanso ntchito mawonekedwe disabled
m'malo mwa .disabled
kalasi. Zachisoni, <a>
s sizigwirizana ndi zomwe olumala.
<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
Onjezani .list-group-flush
kuti muchotse malire ndi ngodya zozungulira kuti mupereke mndandanda wazinthu zamagulu m'mphepete mwa chidebe cha makolo (mwachitsanzo, makadi).
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu chachinayi
- Ndipo wachisanu
<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>
Nambala
Onjezani gulu la .list-group-numbered
zosintha (ndipo mwasankha gwiritsani ntchito <ol>
chinthu) kuti musankhe mndandanda wazinthu zamagulu. Manambala amapangidwa kudzera pa CSS (kusiyana ndi <ol>
masitayilo a msakatuli osasintha) kuti akhazikike bwino mkati mwazinthu zamagulu ndikulola kuti musinthe mwamakonda.
Manambala amapangidwa ndi counter-reset
pa <ol>
, kenako amasinthidwa ndikuyikidwa ndi chinthu ::before
chabodza pa <li>
ndi counter-increment
ndi 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>
Izi zimagwiranso ntchito bwino ndi zomwe mumakonda.
-
Mutu waung'onoCras justo odio
-
Mutu waung'onoCras justo odio
-
Mutu waung'onoCras 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>
Chopingasa
Onjezani .list-group-horizontal
kuti musinthe masanjidwe a mndandanda wazinthu zamagulu kuchokera kumayendedwe mpaka opingasa pamagawo onse. Kapenanso, sankhani mtundu wotsatira .list-group-horizontal-{sm|md|lg|xl|xxl}
kuti gulu la mndandanda likhale lopingasa kuyambira pa breakpoint's min-width
. Panopa magulu a mndandanda wopingasa sangathe kuphatikizidwa ndi magulu a mndandanda wa flush.
ProTip: Mukufuna mndandanda wamagulu amtundu wofanana mukakhala yopingasa? Onjezani .flex-fill
ku gulu lililonse la gulu.
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
- Chinthu
- Chinthu chachiwiri
- Chinthu chachitatu
<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>
Maphunziro a Contextual
Gwiritsani ntchito makalasi amndandanda kuti musinthe zinthu zomwe zili ndi mbiri yabwino komanso mtundu.
- Chinthu chosavuta cha mndandanda wamagulu
- Chinthu chosavuta chamagulu agulu
- Chinthu chosavuta cha gulu lachiwiri
- Chinthu chosavuta cha mndandanda wamagulu
- Gulu losavuta la mndandanda wazowopsa
- Gulu losavuta la mndandanda wazinthu
- Chidziwitso chosavuta cha gulu lazinthu
- Gulu losavuta la mndandanda wazinthu
- Chinthu chosavuta cha gulu lakuda
<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>
Maphunziro a Contextual amagwiranso ntchito ndi .list-group-item-action
. Zindikirani kuwonjezera kwa masitaelo a hover pano omwe sakupezeka mu chitsanzo chapitacho. Komanso kuthandizidwa ndi .active
boma; igwiritseni ntchito kusonyeza kusankha komwe kukuchitika pagulu lachinthu.
<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>
Kupereka tanthauzo ku matekinoloje othandizira
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hidden
kalasi.
Ndi mabaji
Onjezani mabaji pagulu lililonse kuti muwonetse mawerengedwe osawerengeka, zochitika, ndi zina mothandizidwa ndi zina .
- Mndandanda wazinthu14
- Chinthu chachiwiri chamndandanda2
- Mndandanda wachitatu1
<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>
Zomwe zili mwamakonda
Onjezani pafupifupi ma HTML aliwonse mkati, ngakhale pamndandanda wamagulu olumikizidwa monga pansipa, mothandizidwa ndi flexbox utilities .
Lembani mutu wazinthu zamagulu
Masiku 3 apitawoZina zotengera malo mu ndime.
Ndipo zilembo zina zazing'ono.Lembani mutu wazinthu zamagulu
Masiku 3 apitawoZina zotengera malo mu ndime.
Ndipo zilembo zazing'ono zosalankhula.Lembani mutu wazinthu zamagulu
Masiku 3 apitawoZina zotengera malo mu ndime.
Ndipo zilembo zazing'ono zosalankhula.<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>
Mabokosi ndi mawailesi
Ikani mabokosi ndi ma wayilesi a Bootstrap pamndandanda wazinthu zamagulu ndikusintha momwe mungafunire. Mutha kuzigwiritsa ntchito popanda <label>
s, koma chonde kumbukirani kuphatikizira mawonekedwe aria-label
ndi mtengo wopezeka.
- Bokosi loyamba
- Bokosi loyang'ana lachiwiri
- Bokosi lachitatu
- Bokosi lachinayi
- Bokosi lachisanu
<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>
Ndipo ngati mukufuna <label>
kukhala malo .list-group-item
opambana kwambiri, mutha kuchita izi, nanunso.
<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
Zosintha
$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;
Zosakaniza
Amagwiritsidwa ntchito limodzi ndi $theme-colors
kupanga makalasi osinthika a s .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;
}
}
}
}
Lupu
Loop yomwe imapanga makalasi osintha ndi 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);
}
Makhalidwe a JavaScript
Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.js
fayilo yophatikizidwa-kuti muwonjezere gulu lathu la mndandanda kuti mupange mapanelo azomwe zili m'deralo.
<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>
Kugwiritsa ntchito mawonekedwe a data
Mutha kuyambitsa kusanja kwamagulu osalemba JavaScript pongotchula data-bs-toggle="list"
kapena pa chinthu. Gwiritsani ntchito ma data awa pa .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>
Kudzera pa JavaScript
Yambitsani chinthu chamndandanda kudzera pa JavaScript (chinthu chilichonse pamndandanda chikuyenera kutsegulidwa pachokha):
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()
})
})
Mutha kuyambitsa chinthu chamndandanda m'njira zingapo:
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
Kuzimiririka
Kuti ma tabo azitha kuzimiririka, onjezani .fade
chilichonse .tab-pane
. Gawo loyamba la tabu liyeneranso .show
kupangitsa kuti zomwe zili zoyamba ziwonekere.
<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>
Njira
constructor
Imayatsa chinthu chamndandanda komanso chidebe chazinthu. Tabu iyenera kukhala ndi imodzi data-bs-target
kapena href
yolunjika ku chidebe mu 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>
show
Imasankha chinthu chomwe chaperekedwa ndikuwonetsa gawo lomwe likugwirizana nalo. Chilichonse chamndandanda chomwe chidasankhidwa kale chimakhala chosasankhidwa ndipo mawonekedwe ake amabisika. Imabwerera kwa woyimbayo tsamba la tabu lisanasonyezedwe (mwachitsanzo, shown.bs.tab
chochitikacho chisanachitike).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Iwononga tabu ya chinthu.
getInstance
Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM, kapena pangani yatsopano ngati sichinayambike.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Zochitika
Mukawonetsa tabu yatsopano, zochitika zimayaka motere:
hide.bs.tab
(pa tabu yomwe ikugwira ntchito pano)show.bs.tab
(pa tabu yomwe ikuyenera kuwonetsedwa)hidden.bs.tab
(pa tabu yogwira kale, yofanana ndi yahide.bs.tab
chochitikacho)shown.bs.tab
(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi yashow.bs.tab
chochitikacho)
Ngati palibe tabu yomwe idayamba kale, hide.bs.tab
ndi hidden.bs.tab
zochitika sizidzachotsedwa.
Mtundu wa chochitika | Kufotokozera |
---|---|
show.bs.tab |
Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.target ndikuwongolera event.relatedTarget tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana. |
shown.bs.tab |
Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito event.target ndikuwongolera event.relatedTarget tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana. |
hide.bs.tab |
Chochitikachi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito event.target ndi event.relatedTarget kulunjika tabu yomwe ikugwira ntchito ndi tsamba latsopano lomwe lizigwira ntchito posachedwa, motsatana. |
hidden.bs.tab |
Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani event.target ntchito event.relatedTarget ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana. |
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
})
}