Rondedzera boka
Mapoka ezvirongwa chinhu chinochinjika uye chine simba chekuratidza zvakatevedzana zvemukati. Shandura uye uwedzere iwo kuti atsigire zvingangoita chero zviri mukati.
Basic muenzaniso
Boka rinonyanya kukosha irondedzero isina kurongeka ine zvinyorwa uye makirasi akakodzera. Vaka pamusoro payo nesarudzo dzinotevera, kana neCSS yako sezvinodiwa.
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu chechina
- Uye wechishanu
<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>
Active zvinhu
Wedzera .active
kune a .list-group-item
kuratidza ikozvino inoshanda sarudzo.
- Chinhu chinoshanda
- 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>
Zvinhu zvakaremara
Wedzera .disabled
kune a .list-group-item
kuti iite seyakaremadzwa. Ziva kuti zvimwe zvinhu zvine .disabled
zvinozodawo tsika JavaScript kudzima zvizere zviitiko zvavo zvekudzvanya (semuenzaniso, zvinongedzo).
- Chinhu chakaremara
- 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 nemabhatani
Shandisa <a>
s kana <button>
s kugadzira zvinogoneka rondedzero yeboka zvinhu zvine hover, yakaremara, uye inoshanda nyika nekuwedzera .list-group-item-action
. Isu tinopatsanura aya emanyepo-makirasi kuti tive nechokwadi chemapoka akagadzirwa neasina-anopindirana zvinhu (senge <li>
s kana <div>
s) haape kudzvanya kana kudzvanya kugona.
Iva nechokwadi chekusashandisa .btn
makirasi akajairwa pano .
<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>
Ne <button>
s, iwe unogona zvakare kushandisa disabled
hunhu pachinzvimbo .disabled
chekirasi. Zvinosuruvarisa, <a>
s haitsigire vakaremara hunhu.
<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
Wedzera .list-group-flush
kuti ubvise mamwe mabhodha uye makona akatenderedzwa kupa runyorwa zvinhu zveboka kumucheto-kune-kumucheto mumudziyo wevabereki (semuenzaniso, makadhi).
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu chechina
- Uye wechishanu
<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>
Numbered
Wedzera iyo .list-group-numbered
modifier kirasi (uye nesarudzo shandisa <ol>
chinhu) kuti usarudze munhamba yeboka zvinhu zvinhu. Nhamba dzinogadzirwa kuburikidza neCSS (kusiyana <ol>
neiyo s default browser styling) yekuiswa zvirinani mukati mezvinyorwa zveboka zvinhu uye kubvumidza zvirinani kugadzirisa.
Nhamba dzinogadzirwa ne counter-reset
pa <ol>
, uye dzogadzikwa dzogadzikwa ne ::before
pseudo-element pa <li>
with counter-increment
and 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>
Izvi zvinoshanda zvikuru netsika yezvinhu zvakare.
-
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>
Horizontal
Wedzera .list-group-horizontal
kuti uchinje marongero ezvinyorwa zveboka kubva pakatwasuka kuenda kune yakachinjika pamapoinzi ese. Neimwe nzira, sarudza chinodavirwa chinodavidza .list-group-horizontal-{sm|md|lg|xl|xxl}
kuita kuti boka rezita rakachinjika richitangira pabreakpoint's min-width
. Parizvino mapoka emazita akachinjika haagone kusanganiswa nemapoka erunyoro.
ProTip: Unoda kuenzana-hupamhi rondedzero yeboka zvinhu kana yakachinjika? Wedzera .flex-fill
kune chimwe nechimwe cheboka chinhu.
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
- Chinhu
- Chinhu chechipiri
- Chinhu chechitatu
<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>
Contextual classes
Shandisa makirasi emamiriro ekuita rondedzero yezvinhu zvine mamiriro ekunze uye ruvara.
- Chinhu cheboka chiri nyore chinogara chiripo
- Chinhu chakareruka chekutanga cheboka
- Chinhu chakareruka chechipiri cheboka
- Chinhu cheboka chekubudirira chiri nyore
- Chinhu cheboka chenjodzi chiri nyore
- Chinhu cheboka chenyevero chiri nyore
- Chinhu chakareruka cheruzivo cheboka
- Chinhu cheboka chakareruka chechiedza
- Chinhu chiri nyore chakasviba cheboka
<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>
Contextual makirasi anoshandawo ne .list-group-item-action
. Cherechedza kuwedzera kwezvitaera zvehover pano hazvipo mumuenzaniso wapfuura. Uyewo inotsigirwa ihurumende .active
; shandisa kuratidza sarudzo inoshanda pachinhu cheboka rezvinyorwa.
<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>
Kuendesa zvinoreva kunobatsira matekinoroji
Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hidden
nekirasi.
Nemabheji
Wedzera mabheji kune chero chinyorwa cheboka chinhu kuratidza zvisingaverengeki kuverenga, chiitiko, uye nezvimwe nerubatsiro rwezvimwe zvinoshandiswa .
- Chinhu chakanyorwa14
- Chinhu chechipiri chinyorwa2
- Chinhu chechitatu chinyorwa1
<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 content
Wedzera ingangoita chero HTML mukati, kunyangwe yeakabatana rondedzero mapoka seari pazasi, nerubatsiro rweflexbox utilities .
Rondedzera musoro wechinhu cheboka
3 mazuva apfuuraZvimwe zvechibatiso chenzvimbo mundima.
Uye mamwe madiki madiki.Rondedzera musoro wechinhu cheboka
3 mazuva apfuuraZvimwe zvechibatiso chenzvimbo mundima.
Uye mamwe madiki akadzima.Rondedzera musoro wechinhu cheboka
3 mazuva apfuuraZvimwe zvechibatiso chenzvimbo mundima.
Uye mamwe madiki akadzima.<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 nemaredhiyo
Isa mabhokisi eBootstrap echeki nemaredhiyo mukati mezvinyorwa zveboka zvinhu uye gadzirisa sezvinodiwa. Unogona kuzvishandisa pasina <label>
s, asi ndapota yeuka kuisa aria-label
hunhu uye kukosha kwekuwanikwa.
- Chekutanga bhokisi
- Chechipiri cheki bhokisi
- Chechitatu cheki bhokisi
- Cheki bhokisi rechina
- Yechishanu cheki bhokisi
<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>
Uye kana iwe uchida <label>
s senzvimbo .list-group-item
dzakakura dzakarova, unogona kuzviita, futi.
<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
Variables
$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
Inoshandiswa pamwe chete $theme-colors
nekugadzira iwo mamiriro akasiyana makirasi es .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;
}
}
}
}
Loop
Loop iyo inogadzira iyo modifier makirasi ane 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);
}
JavaScript maitiro
Shandisa iyo tebhu JavaScript plugin-isanganise iyo yega kana kuburikidza neyakaunganidzwa bootstrap.js
faira-kuwedzera yedu runyorwa boka kuti ugadzire zvinobatika zvemukati zvemukati.
<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>
Kushandisa data hunhu
Unogona kumisikidza rondedzero yekufamba kweboka pasina kunyora chero JavaScript nekungotsanangura data-bs-toggle="list"
kana pane chinhu. Shandisa idzi data attribution 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>
Via JavaScript
Gonesa chinobatika chinyorwa chinhu kuburikidza neJavaScript (chimwe nechimwe chinyorwa chinoda kuvhurwa chega):
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()
})
})
Iwe unogona kumisa chinhu chega chega munzira dzinoverengeka:
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
Kuita kuti ma tabs panel apere mukati, wedzera .fade
kune imwe neimwe .tab-pane
. Yekutanga tab pane inofanirwawo .show
kuita kuti zvekutanga zvionekwe.
<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>
Nzira
constructor
Inomisikidza chinyorwa chechinhu uye zvemukati mudziyo. Tab inofanirwa kunge iine data-bs-target
kana href
yakanangana nemudziyo node muDOM.
<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
Inosarudza chinhu chakapihwa uye inoratidza chakabatana nacho. Chero chimwe chinhu chakambosarudzwa chinova chisina kusarudzwa uye pane chakabatana nacho chinovanzwa. Inodzokera kune anofona tebhu isati yanyatsoratidzwa (semuenzaniso, shown.bs.tab
chiitiko chisati chaitika).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Inoparadza tebhu yechinhu.
getInstance
Static nzira iyo inokutendera iwe kuti uwane iyo tab muenzaniso yakabatana neiyo DOM chinhu
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Static nzira iyo inokutendera iwe kuti uwane iyo tab muenzaniso yakabatana neiyo DOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Zviitiko
Kana uchiratidza tebhu nyowani, zviitiko zvinopisa nenzira inotevera:
hide.bs.tab
(pane ikozvino inoshanda tab)show.bs.tab
(paicha-kuratidzwa tab)hidden.bs.tab
(paiyo yapfuura inoshanda tebhu, yakafananahide.bs.tab
neyechiitiko)shown.bs.tab
(paiyo ichangobva-kushanda ichangoratidzwa tab, yakafananashow.bs.tab
neyechiitiko)
Kana pasina tab yanga yatoshanda, iyo hide.bs.tab
uye hidden.bs.tab
zviitiko hazvizodzingwa.
Chiitiko mhando | Tsanangudzo |
---|---|
show.bs.tab |
Ichi chiitiko chinopisa pane tab show, asi iyo itsva tebhu isati yaratidzwa. Shandisa event.target uye event.relatedTarget kunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana. |
shown.bs.tab |
Ichi chiitiko chinopisa pane tab show mushure mekunge tab yaratidzwa. Shandisa event.target uye event.relatedTarget kunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana. |
hide.bs.tab |
Ichi chiitiko chinopisa kana tabhu nyowani icharatidzwa (uye nekudaro iyo yapfuura inoshanda tebhu inofanira kuvanzwa). Shandisa event.target uye event.relatedTarget kunanga yazvino inoshanda tebhu uye iyo nyowani-ichaita-inoshanda tebhu, zvichiteerana. |
hidden.bs.tab |
Ichi chiitiko chinopisa mushure mekunge tabhu nyowani yaratidzwa (uye nekudaro iyo yapfuura inoshanda tebhu yakavanzwa). Shandisa event.target uye event.relatedTarget kunanga iyo yapfuura inoshanda tebhu uye iyo itsva inoshanda tebhu, zvichiteerana. |
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
})
}