Liste ya groupe
Ba groupes ya liste ezali composante flexible pe ya makasi pona kolakisa série ya contenus. Bobongola mpe bobakisi yango mpo na kosunga kaka pene na makambo nyonso oyo ezali na kati.
Ndakisa ya moboko
Lisanga ya liste ya moboko mingi ezali liste oyo ezali na molongo te na biloko ya liste mpe bakelasi oyo ebongi. Tongela likolo na yango na ba options oyo elandi, to na CSS na yo moko soki esengeli.
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Likambo ya minei
- Mpe moko ya mitano
<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>
Biloko oyo ezali kosala
Bakisa .active
na a .list-group-item
mpo na kolakisa kopona oyo ezali kosala sikoyo.
- Eloko moko oyo ezali kosala
- Eloko ya mibale
- Eloko ya misato
- Likambo ya minei
- Mpe moko ya mitano
<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>
Biloko oyo ezali na bolɛmbu
Bakisa .disabled
na a .list-group-item
mpo emonana lokola ekangami. Yeba ete ba éléments mosusu na .disabled
ekosenga mpe JavaScript personnalisé mpo na ko désactiver entièrement ba événements na bango ya cliquage (par exemple, ba liens).
- Eloko moko oyo ekangami
- Eloko ya mibale
- Eloko ya misato
- Likambo ya minei
- Mpe moko ya mitano
<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>
Ba liens na ba boutons
Salelá <a>
s to <button>
s mpo na kosala biloko ya etuluku ya liste oyo ekoki kosala na makambo oyo ezali na hover, oyo ekangami, mpe oyo ezali kosala na kobakisa .list-group-item-action
. Tokaboli ba pseudo-classes oyo pona ko assurer que ba groupes ya liste oyo esalemi na ba éléments non interactifs (lokola <li>
s to <div>
s) epesa te affordance ya clic to tap.
Sala makasi osalela ba classes standard.btn
awa te .
<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>
Na <button>
s, okoki mpe kosalela disabled
attribut na esika ya .disabled
kelasi. Likambo ya mawa, <a>
s esungaka te attribut oyo ekangami.
<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>
Kosukola yango
Bakisa .list-group-flush
mpo na kolongola mwa bandelo mpe ba coins ya arrondi mpo na kolakisa biloko ya lisanga ya liste nsɔngɛ na nsɔngɛ na kati ya eloko ya moboti (ndakisa, bakarte).
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Likambo ya minei
- Mpe moko ya mitano
<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>
Bazali na banimero
Bakisa .list-group-numbered
kelasi ya mobongisi (mpe na bolingi kosalela <ol>
eleman moko) mpo na kopona na kati ya biloko ya etuluku ya liste oyo ezali na banimero. Mituya esalemi na nzela ya CSS (na bokeseni na <ol>
s styling ya navigateur par défaut) mpo na kotia malamu na kati ya biloko ya lisanga ya liste mpe mpo na kopesa nzela na bopesi malamu koleka.
Mituya esalemi na counter-reset
na <ol>
, mpe na nsima esalemi na lolenge mpe etyami na ::before
pseudo-élément na <li>
na counter-increment
mpe content
.
- Cras kaka odio
- Cras kaka odio
- Cras kaka 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>
Ba oyo basalaka malamu na contenus personnalisé lokola.
-
Motó ya likambo mokeCras kaka odio
-
Motó ya likambo mokeCras kaka odio
-
Motó ya likambo mokeCras kaka 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>
Ya kolala
Bakisa .list-group-horizontal
mpo na kobongola bobongisi ya biloko ya lisanga ya liste uta na vertical kino na horizontal na kati ya ba points de rupture nionso. Na lolenge mosusu, pona variante oyo ezo répondre .list-group-horizontal-{sm|md|lg|xl|xxl}
pona kosala groupe ya liste horizontale kobanda na point de rupture wana's min-width
. Sikawa bituluku ya liste horizontale ekoki kosangisama te na bituluku ya liste ya flush.
ProTip: Olingi biloko ya etuluku ya liste ya bonene ekokani ntango ezali horizontal? Bakisa .flex-fill
na liste moko na moko eloko ya etuluku.
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
<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>
Ba kelasi ya contexte
Salelá bakelasi ya contexte mpo na kosala liste ya biloko oyo ezali na fond mpe langi ya état.
- Eloko ya groupe ya liste par défaut ya pete
- Eloko ya groupe ya liste primaire ya pete
- Eloko ya groupe ya liste secondaire ya pete
- Eloko ya groupe ya liste ya succès ya pete
- Eloko ya groupe ya liste ya makama ya pete
- Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ
- Eloko ya groupe ya liste ya info ya pete
- Eloko ya etuluku ya liste ya pole ya pɛtɛɛ
- Eloko ya groupe ya liste ya molili ya pete
<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>
Ba kelasi ya contexte esalaka mpe na .list-group-item-action
. Boyeba kobakisa ba styles ya hover awa oyo ezali te na ndakisa ya liboso. Lisusu esungami ezali l’ .active
Etat; kosalela yango mpo na kolakisa koponama ya mosala na eloko ya etuluku ya liste ya contexte.
<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>
Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hidden
kelasi.
Na ba badges
Bakisa ba badges na eloko nyonso ya groupe ya liste mpo na kolakisa ba comptes oyo etangami te, activité, mpe makambo mosusu na lisalisi ya ba utilitaires mosusu .
- Eloko moko ya liste14
- Eloko ya mibale ya liste2. 2
- Eloko ya misato ya liste1. 1.
<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>
Contenu personnalisé
Bakisa pene na HTML nyonso na kati, ata mpo na bituluku ya liste oyo ezali na boyokani lokola oyo ezali awa na nse, na lisalisi ya ba utilitaires ya flexbox .
Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo elekiMakambo mosusu oyo ezali na kati ya paragrafe moko.
Mpe mwa makomi ya mikemike.Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo elekiMakambo mosusu oyo ezali na kati ya paragrafe moko.
Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo.Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo elekiMakambo mosusu oyo ezali na kati ya paragrafe moko.
Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo.<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>
Ba cases ya kotiya bilembo mpe ba radios
Tia ba cases ya kotiya bilembo ya Bootstrap mpe ba radios na kati ya biloko ya groupe ya liste mpe sala yango na ndenge esengeli. Okoki kosalela yango kozanga <label>
s, kasi kobosana te kotia aria-label
attribut mpe motuya mpo na accessibilité.
- Boîte de coche ya liboso
- Boîte de coche ya mibale
- Boîte de coche ya misato
- Boîte de coche ya minei
- Boîte de coche ya mitano
<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>
Mpe soki olingi <label>
s lokola .list-group-item
mpo na bisika minene ya kobɛta, okoki kosala yango, mpe.
<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 oyo azali
Ba variables oyo ezali
$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;
Ba mixins
Esalemi na bosangani na $theme-colors
mpo na kobimisa ba kelasi ya variante contextuelle mpo na .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;
}
}
}
}
Boucle
Boucle oyo ebimisaka ba classes ya modificateur na 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);
}
Etamboli ya JavaScript
Salelá onglet plugin JavaScript —kotia yango mokomoko to na nzela ya bootstrap.js
fisyé oyo esangisi —mpo na koyeisa monene etuluku na biso ya liste mpo na kosala ba panneaux tabbables ya makambo ya esika.
<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>
Kosalela ba attributs ya ba données
Okoki ko activer navigation ya groupe ya liste sans kokoma JavaScript moko te na ko préciser kaka data-bs-toggle="list"
to na élément moko. Salelá bizaleli oyo ya ba données na .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>
Na nzela ya JavaScript
Activer eloko ya liste ya ba tabbables na nzela ya JavaScript (esengeli ko activer eloko moko na moko ya liste moko moko):
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()
})
})
Okoki ko activer eloko ya liste moko moko na ba façons ebele:
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
Effet ya kosila
Mpo na kosala ete panneau ya ba onglets esili, bakisa .fade
na moko na moko .tab-pane
. Panneau ya onglet ya liboso esengeli mpe kozala .show
na kosala ete makambo ya ebandeli emonanaka.
<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>
Ba méthodes ya kosala
constructor
Ezali ko activer élément ya eloko ya liste mpe conteneur ya contenus. Onglet esengeli kozala na soit a soit data-bs-target
un href
ciblant node ya conteneur na 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>
kolakisa
Pona eloko ya liste oyo epesami mpe elakisaka panneau na yango oyo esangisi yango. Eloko mosusu nyonso ya liste oyo eponami liboso ekokóma oyo eponami te mpe etanda na yango oyo esangisi yango ebombami. Ezongi na mobengi yambo ete esika ya tab elakisama mpenza (ndakisa, yambo ete shown.bs.tab
likambo esalema).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
kobwaka yango
Ebebisaka tab ya élément moko.
kozwaInstance
Méthode statique oyo e permettre yo ozua instance ya onglet associé na élément DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
kozwaToKosalaInstance
Méthode statique oyo e permettre yo ozua instance ya onglet associé na élément DOM, to kosala ya sika au cas où ebandaki ko initialiser te
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Makambo oyo esalemaki
Ntango ozali kolakisa tab ya sika, makambo yango ekobeta na molɔngɔ oyo elandi:
hide.bs.tab
(na tab oyo ezali kosala lelo)show.bs.tab
(na tab oyo esengeli kolakisa)hidden.bs.tab
(na onglet actif ya liboso, ndenge moko na oyo yahide.bs.tab
événement)shown.bs.tab
(na tab oyo euti kolakisa sika oyo ezali kosala sika, ndenge moko na oyo yashow.bs.tab
likambo yango)
Soki onglet moko te ezalaki déjà activé, ba événements hide.bs.tab
mpe hidden.bs.tab
ekobeta te.
Lolenge ya likambo | Ndimbola |
---|---|
show.bs.tab |
Evenement oyo ezo beta na tab show, mais avant onglet ya sika elakisama. Salelá event.target mpe mpo na event.relatedTarget ko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement. |
shown.bs.tab |
Evenement oyo ezo beta na tab show sima ya tab moko elakisama. Salelá event.target mpe mpo na event.relatedTarget ko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement. |
hide.bs.tab |
Evenement oyo ezo beta tango onglet ya sika esengeli kolakisa (et donc onglet actif ya kala esengeli kobombama). Salelá event.target mpe event.relatedTarget mpo na kopesa motuya na tab oyo ezali kosala sikoyo mpe onglet ya sika oyo ekosalema kala mingi te, na kolanda. |
hidden.bs.tab |
Evenement oyo ezo beta sima ya onglet ya sika elakisami (mpe bongo onglet actif ya kala ebombami). Salelá event.target mpe mpo na event.relatedTarget ko cibler onglet active ya kala mpe onglet active ya sika, respectivement. |
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
})
}