Рӯйхати гурӯҳ
Гурӯҳҳои рӯйхат як ҷузъи фасеҳ ва тавоно барои намоиши як қатор мундариҷа мебошанд. Онҳоро тағир диҳед ва васеъ кунед, то тақрибан ҳама мундариҷаро дастгирӣ кунанд.
Намунаи асосӣ
Рӯйхати асосӣтарин ин рӯйхати номатлуб бо ҷузъҳои рӯйхат ва синфҳои мувофиқ мебошад. Дар асоси он бо имконоти зерин ё бо CSS-и худ, агар лозим бошад, созед.
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Моддаи чорум
- Ва панҷум
<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
ба a .list-group-item
барои нишон додани интихоби фаъоли ҷорӣ.
- Як ҷузъи фаъол
- 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>
Ададҳои ғайрифаъол
Ба .disabled
a илова кунед ,.list-group-item
то он ғайрифаъол намуд. Дар хотир доред, ки баъзе унсурҳои дорои JavaScript-и фармоиширо низ талаб мекунанд, то рӯйдодҳои клики худро комилан ғайрифаъол кунанд (масалан, истинодҳо)..disabled
- Як ашёи ғайрифаъол
- 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>
Пайвандҳо ва тугмаҳо
s <a>
ё <button>
s -ро барои эҷод кардани ҷузъҳои гурӯҳии рӯйхат бо ҳолати нишонагиранда, ғайрифаъол ва фаъол бо илова кардани .list-group-item-action
. Мо ин синфҳои псевдо-синфҳоро ҷудо мекунем, то боварӣ ҳосил кунем, ки гурӯҳҳои рӯйхат аз унсурҳои ғайриинтерактивӣ (ба монанди <li>
s ё <div>
s) клик ё ламсро таъмин накунанд.
Боварӣ ҳосил кунед, ки дар ин ҷо дарсҳои стандартиро истифода набаред.btn
.
<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>
Бо <button>
s, шумо инчунин метавонед disabled
атрибутро ба ҷои .disabled
синф истифода баред. Мутаассифона, <a>
s атрибути маъюбонро дастгирӣ намекунад.
<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>
Оббозӣ
Илова кунед .list-group-flush
, то баъзе сарҳадҳо ва кунҷҳои мудавваршударо нест кунед, то ҷузъҳои гурӯҳи рӯйхатро дар як контейнери волидайн канор ба канор нишон диҳед (масалан, кортҳо).
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Моддаи чорум
- Ва панҷум
<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>
Рақамгузорӣ
Синфи тағирдиҳандаро илова .list-group-numbered
кунед (ва ихтиёрӣ як <ol>
унсурро истифода баред) барои дохил шудан ба ҷузъҳои гурӯҳи рақамии рӯйхат. Рақамҳо тавассути CSS тавлид мешаванд (бар хилофи услуби <ol>
пешфарзии браузер) барои ҷойгиркунии беҳтар дар дохили ҷузъҳои гурӯҳи рӯйхат ва имкон додани мутобиқсозии беҳтар.
Рақамҳо аз ҷониби , тавлид мешаванд counter-reset
ва <ol>
сипас бо услуби ::before
псевдо-элемент дар <li>
бо counter-increment
ва 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>
Инҳо бо мундариҷаи фармоишӣ низ хуб кор мекунанд.
-
СарлавҳаCras justo odio
-
СарлавҳаCras justo odio
-
СарлавҳаCras 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>
Уфуқӣ
Илова .list-group-horizontal
барои тағир додани тарҳбандии ҷузъҳои гурӯҳи рӯйхат аз амудӣ ба уфуқӣ дар тамоми нуқтаҳои кандашавӣ. Интихобан, як варианти ҷавобгӯро интихоб кунед, .list-group-horizontal-{sm|md|lg|xl|xxl}
то гурӯҳи рӯйхатро аз нуқтаи қатъшавии он уфуқӣ созед min-width
. Дар айни замон гурӯҳҳои рӯйхатҳои уфуқӣ бо гурӯҳҳои флешдор якҷоя карда намешаванд.
Маслиҳат: Мехоҳед, ки ҳангоми уфуқӣ ҷузъҳои гурӯҳи рӯйхати паҳнои баробарро мехоҳед? Ба .flex-fill
ҳар як ҷузъи гурӯҳи рӯйхат илова кунед.
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
- Як ашё
- Як ҷузъи дуюм
- Моддаи сеюм
<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>
Синфҳои контекстӣ
Синфҳои контекстӣ барои услуби ҷузъҳои рӯйхат бо замина ва ранги ҳолатиро истифода баред.
- Унсури оддии рӯйхати пешфарз
- Ҷузъи оддии гурӯҳи рӯйхати ибтидоӣ
- Унсури гурӯҳи оддии дуюмдараҷа
- Як ҷузъи оддии рӯйхати муваффақият
- Як ҷузъи оддии гурӯҳи хатарҳо
- Унсури гурӯҳи оддии огоҳкунанда
- Унсури гурӯҳи оддии рӯйхати маълумот
- Як унсури гурӯҳи оддии рӯшноӣ
- Як ҷузъи оддии гурӯҳи рӯйхати торик
<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>
Синфҳои контекстӣ низ бо .list-group-item-action
. Ба иловаи сабкҳои овезон дар ин ҷо аҳамият диҳед, ки дар мисоли қаблӣ мавҷуд нестанд. Инчунин .active
давлат дастгирй карда мешавад; онро барои нишон додани интихоби фаъол дар банди гурӯҳи рӯйхати контекстӣ истифода баред.
<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>
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .visually-hidden
синф пинҳоншуда дохил карда мешавад.
Бо нишонҳо
Ба ягон ҷузъи гурӯҳи рӯйхат нишонаҳо илова кунед, то бо ёрии баъзе утилитаҳо ҳисобҳои нохонда, фаъолият ва ғайраро нишон диҳед .
- Як ҷузъи рӯйхат14
- Як ҷузъи дуюми рӯйхат2
- Як ҷузъи сеюми рӯйхат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>
Мундар��ҷаи фармоишӣ
Бо ёрии утилитаҳои flexbox тақрибан ҳама HTML-ро дар дохили он илова кунед, ҳатто барои гурӯҳҳои алоқаманд бо рӯйхати дар поён овардашуда .
Сарлавҳаи ҷузъҳои гурӯҳро рӯйхат кунед
3 руз пешБаъзе мундариҷаи ҷойнишин дар параграф.
Ва баъзе чопи хурд.Сарлавҳаи ҷузъҳои гурӯҳро рӯйхат кунед
3 руз пешБаъзе мундариҷаи ҷойнишин дар параграф.
Ва баъзе чопи хурди хомӯшшуда.Сарлавҳаи ҷузъҳои гурӯҳро рӯйхат кунед
3 руз пешБаъзе мундариҷаи ҷойнишин дар параграф.
Ва баъзе чопи хурди хомӯшшуда.<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>
Санҷишҳо ва радиоҳо
Қуттиҳо ва радиоҳои Bootstrap-ро дар дохили ҷузъҳои гурӯҳи рӯйхат ҷойгир кунед ва дар ҳолати зарурӣ танзим кунед. Шумо метавонед онҳоро бидуни <label>
s истифода баред, аммо лутфан фаромӯш накунед, ки aria-label
атрибут ва арзиш барои дастрасӣ дохил кунед.
- Қуттии аввал
- Қуттии дуюм
- Қуттии сеюм
- Қуттии чорум
- Қуттии панҷум
<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>
Ва агар шумо хоҳед, ки <label>
s ҳамчун .list-group-item
минтақаҳои зиёди зарбазананда, шумо низ метавонед ин корро кунед.
<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>
Сасс
Тағйирёбандаҳо
$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;
Миксинҳо
Дар якҷоягӣ бо $theme-colors
барои тавлиди синфҳои вариантҳои контекстӣ барои .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;
}
}
}
}
Доира
Доиравӣ, ки синфҳои тағирдиҳандаро бо list-group-item-variant()
миксин тавлид мекунад.
// 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
Васлкунаки JavaScript-ро истифода баред - онро ба таври инфиродӣ ё тавассути bootstrap.js
файли тартибдодашуда дохил кунед - барои васеъ кардани гурӯҳи рӯйхати мо барои сохтани панелҳои ҷадвалбандии мундариҷаи маҳаллӣ.
<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>
Истифодаи атрибутҳои маълумот
Шумо метавонед паймоиши гурӯҳи рӯйхатро бидуни навиштани ягон JavaScript бо танҳо муайян data-bs-toggle="list"
кардан ё дар элемент фаъол созед. Ин атрибутҳои маълумотро дар .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>
Тавассути JavaScript
Унсури рӯйхати ҷадвалбандиҳоро тавассути JavaScript фаъол созед (ҳар як ҷузъи рӯйхат бояд алоҳида фаъол карда шавад):
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()
})
})
Шумо метавонед унсури рӯйхатро бо чанд роҳ фаъол созед:
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
ба ҳар як .tab-pane
. Панели ҷадвали аввал низ бояд .show
мундариҷаи ибтидоиро намоён гардонад.
<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>
Усулҳо
constructor
Унсури рӯйхат ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-bs-target
як href
гиреҳи контейнерро дар 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>
нишон додан
Объекти рӯйхатро интихоб мекунад ва панели алоқаманди онро нишон медиҳад. Ҳама ҷузъҳои дигари рӯйхат, ки қаблан интихоб шуда буд, интихоб нашуда ва панели алоқаманди он пинҳон мешавад. Ба зангзананда пеш аз он ки панели ҷадвал воқеан нишон дода шавад, бармегардад (масалан, пеш аз shown.bs.tab
рух додани ҳодиса).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
ихтиёр кардан
Варақаи элементро нест мекунад.
гирифтани Instance
Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли ҷадвалро бо унсури DOM алоқаманд ба даст оред
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab
(on the current active tab)show.bs.tab
(on the to-be-shown tab)hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event)shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event type | Description |
---|---|
show.bs.tab |
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab |
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab |
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
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
})
}