Kyerɛw kuw no din
List groups yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a wɔde da nsɛm a ɛtoatoa so adi. Sesa na trɛw mu ma ɛboa ɛkame ayɛ sɛ nsɛm biara a ɛwɔ mu no.
Nhwɛso titiriw
List kuw a ɛho hia sen biara ne list a wɔanhyehyɛ no yiye a list nneɛma ne adesua ahorow a ɛfata wom. Fa akwan horow a edi hɔ no si so, anaasɛ fa w’ankasa CSS sɛnea ɛho hia.
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade a ɛto so anan
- Na nea ɛto so anum
<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>
Nneɛma a ɛyɛ nnam
Fa ka .active
a ho .list-group-item
na kyerɛ mprempren a woapaw a ɛreyɛ adwuma no.
- Ade a ɛyɛ nnam
- 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>
Nneɛma a wɔadi dɛm
Fa ka .disabled
a ho .list-group-item
na ama ayɛ te sɛ nea wɔagyae. Hyɛ no nsow sɛ elements bi a ɛwɔ .disabled
nso bɛhwehwɛ JavaScript a wɔahyɛ da ayɛ no na ama wɔn click events no ayɛ adwuma koraa (sɛ nhwɛso no, links).
- Ade a wɔadi dɛm
- 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 ne bɔtɔn ahorow
Fa <a>
s anaa <button>
s yɛ list kuw nneɛma a wotumi yɛ ho adwuma a ɛwɔ hover, disabled, ne active states denam .list-group-item-action
. Yɛtetew saa pseudo-classes yi mu de hwɛ hu sɛ list akuw a wɔde nneɛma a ɛnyɛ nkitahodi (te sɛ <li>
s anaa <div>
s) ayɛ no remma click anaa tap affordance.
Hwɛ hu sɛ woremfa .btn
adesua ahorow a ɛwɔ hɔ no nni dwuma wɔ ha .
<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Sɛ wode <button>
s di dwuma a, wubetumi nso de disabled
su no adi dwuma sen sɛ wode .disabled
adesuakuw no bedi dwuma. Awerɛhosɛm ne sɛ, <a>
s ntumi mmoa su a wɔadi dɛm no.
<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 a wɔde hyɛ mu
Fa ka .list-group-flush
ho na yi ahyeɛ binom ne ntwea a ɛyɛ kurukuruwa de kyerɛ list kuw nneɛma ase-kɔ-ano wɔ ɔwofoɔ ahina mu (sɛ nhwɛsoɔ, kaad).
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade a ɛto so anan
- Na nea ɛto so anum
<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>
Wɔde nɔma ahyɛ mu
Fa .list-group-numbered
modifier class no ka ho (na sɛ wopɛ a, fa <ol>
element bi di dwuma) na paw sɛ wobɛkɔ numbered list group nneɛma mu. Wɔnam CSS so na ɛyɛ nɔma (a ɛne <ol>
s default browser styling bɔ abira) ma wɔde si list kuw nneɛma mu yiye na ɛma kwan ma wɔyɛ nsakrae yiye.
Wɔde akontaahyɛde ahorow no ba counter-reset
wɔ <ol>
, na afei wɔyɛ no sɛnea wɔyɛ no na wɔde ::before
pseudo-element bi si <li>
with counter-increment
ne content
.
- Asɛm bi a wɔahyehyɛ
- Asɛm bi a wɔahyehyɛ
- Asɛm bi a wɔahyehyɛ
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
Eyinom yɛ adwuma kɛse ne amanneɛbɔ nsɛm nso.
-
Asɛmti ketewaa biNsɛm a ɛwɔ mu ma list item
-
Asɛmti ketewaa biNsɛm a ɛwɔ mu ma list item
-
Asɛmti ketewaa biNsɛm a ɛwɔ mu ma list item
<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>
Content for list item
</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>
Content for list item
</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>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Ne tɛtrɛtɛ mu
Fa ka .list-group-horizontal
ho na sesa list group nneɛma no nhyehyɛe fi vertical kɔ horizontal wɔ breakpoints nyinaa so. Sɛnea ɛbɛyɛ a, paw mmuae variant .list-group-horizontal-{sm|md|lg|xl|xxl}
na ama list kuw bi ayɛ horizontal a efi ase wɔ saa breakpoint no min-width
. Mprempren wontumi mfa horizontal list akuw no nka flush list akuw ho.
ProTip: Wopɛ list kuw nneɛma a ne tɛtrɛtɛ yɛ pɛ bere a ɛwɔ soro no? Fa ka .flex-fill
list kuw ade biara ho.
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
- Ade bi
- Ade a ɛto so abien
- Ade a ɛto so abiɛsa
<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>
Adesua ahorow a ɛfa nsɛm a ɛfa ho
Fa contextual classes di dwuma fa style list nneɛma a ɛwɔ stateful akyi ne kɔla.
- Default list kuw ade a ɛnyɛ den
- Mfitiase list kuw ade a ɛnyɛ den
- Asɛm a ɛnyɛ den a ɛto so abien list kuw ade
- A simple nkonimdi list kuw ade
- Asiane list kuw ade a ɛnyɛ den
- Kɔkɔbɔ list kuw ade a ɛnyɛ den
- A simple info list kuw ade
- Hann list kuw ade a ɛnyɛ den
- Esum list kuw ade a ɛnyɛ den
<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>
Nsɛm a ɛfa ho adesua ahorow nso ne .list-group-item-action
. Hyɛ hover styles a ɛwɔ ha a enni nhwɛso a atwam no mu no nsow. Ɔman no nso boa .active
; fa di dwuma de kyerɛ nea wɔapaw a ɛyɛ nnam wɔ nsɛm a ɛfa ho list kuw ade bi so.
<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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hidden
adesuakuw no mu.
Wɔde badge ahorow ahyɛ mu
Fa badge ahorow ka list kuw ade biara ho de kyerɛ akontaabu a wonkenkanee, dwumadi, ne nea ɛkeka ho denam utilities binom mmoa so .
- Asɛm bi a wɔahyehyɛ14. 15
- Ade a ɛto so abien a wɔahyehyɛ2. 2.
- Ade a ɛto so abiɛsa a wɔahyehyɛ1. 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>
Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ
Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no, denam flexbox utilities mmoa so .
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niNsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.
Na nsɛm nketenkete bi nso.Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niNsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.
Na ebinom nso yɛɛ mum nkyerɛwee nketewa.Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niNsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.
Na ebinom nso yɛɛ mum nkyerɛwee nketewa.<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>
Nnaka a wɔde hyɛ mu ne radio ahorow
Fa Bootstrap no checkboxes ne radio ahorow no gu list group nneɛma mu na yɛ sɛnea ɛho hia. Wubetumi de adi dwuma a <label>
s nka ho, nanso yɛsrɛ wo kae sɛ wode aria-label
su ne bo bi bɛka ho ama kwan a wobɛfa so anya bi.
- Nea edi kan no, checkbox
- Checkbox a ɛto so abien
- Nhwehwɛmu adaka a ɛto so abiɛsa
- Nhwehwɛmu adaka a ɛto so anan
- Checkbox a ɛto so anum
<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>
Na sɛ wopɛ <label>
s sɛ nea .list-group-item
ɛwɔ mmeae akɛse a hit no a, wubetumi ayɛ saa, nso.
<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
Nneɛma a Ɛsakra
$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;
Nneɛma a wɔde frafra
Wɔde di dwuma de ka bom ne $theme-colors
sɛ wɔde bɛma nsɛm a ɛfa ho no mu nsakrae adesua ahorow no aba ma .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;
}
}
}
}
Ɛpɔ
Loop a ɛma modifier classes no ne list-group-item-variant()
mixin no.
// 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 nneyɛe
Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.js
fael a wɔaboaboa ano no so—na trɛw yɛn list kuw no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.
<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>
Data su ahorow a wɔde bedi dwuma
data-bs-toggle="list"
Wubetumi ama list group navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ kɛkɛ anaasɛ wobɛda so. Fa saa data su ahorow yi di dwuma wɔ .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>
Ɛdenam JavaScript so
Ma tabbable list item no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode list item biara yɛ adwuma mmiako mmiako):
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()
})
})
Wubetumi ama ankorankoro list item no ayɛ adwuma wɔ akwan horow pii so:
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 nkɛntɛnso
Sɛ wopɛ sɛ tabs panel no bɛyera a, fa ka .fade
emu biara ho .tab-pane
. Ɛsɛ sɛ tab pane a edi kan no nso .show
ma nsɛm a edi kan no da adi.
<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>
Akwan a wɔfa so yɛ
constructor
Ɛma list item element ne content container bi yɛ adwuma. Ɛsɛ sɛ tab nya a data-bs-target
anaasɛ href
targeting a container node wɔ DOM no mu.
<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>
da no adi
Paw list ade a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. List adeɛ foforɔ biara a wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (sɛ nhwɛso no, ansa na shown.bs.tab
asɛm no asi).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
tow gu
Ɔsɛe element bi tab no.
nyaNhwɛsode
Static kwan a ɛma wo kwan ma wo nya tab instance a ɛbata DOM element bi ho
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
nyaAnaasɛKyɛNhwɛso
Static kwan a ɛma wo kwan ma wo nya tab instance a ɛbata DOM element bi ho, anaasɛ wobɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Nsɛm a esisi
Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:
hide.bs.tab
(wɔ tab a ɛreyɛ adwuma mprempren no so)show.bs.tab
(wɔ tab a wɔrebɛkyerɛ no so)hidden.bs.tab
(wɔ active tab a atwam no so no, nea ɛwɔhide.bs.tab
adeyɛ no ho no ara)shown.bs.tab
(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔshow.bs.tab
adeyɛ no ho no ara)
Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, wɔrentow hide.bs.tab
ne hidden.bs.tab
nsɛm a esisi no.
Adeyɛ no su | Nkyerɛmu |
---|---|
show.bs.tab |
Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.target ne di dwuma event.relatedTarget fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. |
shown.bs.tab |
Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.target ne di dwuma event.relatedTarget fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. |
hide.bs.tab |
Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.target ne di dwuma event.relatedTarget fa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara. |
hidden.bs.tab |
Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.target ne di dwuma event.relatedTarget fa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara. |
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
})
}