گروپی لیست
گروپەکانی لیست پێکهاتەیەکی نەرم و بەهێزن بۆ پیشاندانی زنجیرەیەک ناوەڕۆک. دەستکاری بکە و درێژیان بکە بۆ پشتگیریکردن لە تەنها نزیکەی هەر ناوەڕۆکێک لە ناوەوە.
نموونەی بنەڕەتی
بنەڕەتیترین گروپی لیست لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکان و پۆلە گونجاوەکانی تێدایە. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان بە 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
بۆ ئاماژەدان بە هەڵبژاردەی چالاکی ئێستا.
- بابەتێکی چالاکە
- بڕگەی دووەم
- بڕگەی سێیەم
- بڕگەیەکی چوارەم
- وە یەکێکی پێنجەمیان
<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
بۆ ئەوەی وا دەرکەوێت کە لەکارکەوتووە. تێبینی بکە کە هەندێک لە توخمەکان لەگەڵ .disabled
هەروەها پێویستیان بە جاڤاسکڕێپتی تایبەت دەبێت بۆ ئەوەی ڕووداوەکانی کلیککردنیان بە تەواوی لەکاربخەن (بۆ نموونە، بەستەرەکان).
- بابەتی لەکارخراو
- بڕگەی دووەم
- بڕگەی سێیەم
- بڕگەیەکی چوارەم
- وە یەکێکی پێنجەمیان
<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>
لینك و دوگمەكان
<a>
s یان s بەکاربهێنە <button>
بۆ دروستکردنی شتەکانی گروپی لیستی کردار بە هۆڤەر، لەکارخراو و باری چالاک بە زیادکردنی .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 class="list-group-item list-group-item-action disabled">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>
ستایلی پێشوەختەی وێبگەڕی s) بۆ جێگیرکردنی باشتر لە ناو بابەتە گروپەکانی لیست و بۆ ڕێگەدان بە باشترکردنی خۆکارکردن.
ژمارەکان لەلایەن counter-reset
لەسەر , دروست دەکرێن <ol>
، و پاشان ستایل دەکرێن و بە ::before
توخمێکی ساختە لەسەر <li>
with counter-increment
و دادەنرێت content
.
- بابەتی لیستێک
- بابەتی لیستێک
- بابەتی لیستێک
<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>
ئەمانە زۆر باش کاردەکەن لەگەڵ ناوەڕۆکی تایبەتمەند بە هەمان شێوە.
-
سەردێڕی لاوەکیناوەڕۆک بۆ بابەتی لیست
-
سەردێڕی لاوەکیناوەڕۆک بۆ بابەتی لیست
-
سەردێڕی لاوەکیناوەڕۆک بۆ بابەتی لیست
<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>
ئاسۆیی
زیادکردن .list-group-horizontal
بۆ گۆڕینی شێوازی بابەتە گروپەکانی لیست لە ڕاستەوە بۆ ئاسۆیی لە سەرانسەری هەموو خاڵەکانی شکاندن. یانیش، جۆرێکی وەڵامدەرەوە هەڵبژێرە .list-group-horizontal-{sm|md|lg|xl|xxl}
بۆ ئەوەی گروپێکی لیستێکی ئاسۆیی بکەیت کە لەو خاڵە شکاندنەوە دەست پێدەکات min-width
. لە ئێستادا گروپەکانی لیستی ئاسۆیی ناتوانرێت لەگەڵ گروپەکانی لیستی فڵش تێکەڵ بکرێت.
ProTip: دەتەوێت بابەتی گروپی لیستی پانایی یەکسان کاتێک ئاسۆیی بێت؟ زیاد بکە .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. 14
- بابەتی دووەمی لیست2. 2
- بڕگەی سێیەمی لیست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>
ناوەڕۆکی تایبەت بەخۆت
نزیکەی هەر HTMLێک لە ناوەوە زیاد بکە، تەنانەت بۆ گروپەکانی لیستی بەستراو وەک ئەوەی خوارەوە، بە یارمەتی سوودمەندییەکانی flexbox .
سەردێڕی بابەتی گروپ بنووسە
٣ رۆژ پێش ئێستاهەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.
وە هەندێک چاپی بچووک.سەردێڕی بابەتی گروپ بنووسە
٣ رۆژ پێش ئێستاهەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.
وە هەندێک چاپی بچووکی بێدەنگ.سەردێڕی بابەتی گروپ بنووسە
٣ رۆژ پێش ئێستاهەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.
وە هەندێک چاپی بچووکی بێدەنگ.<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 وەک the .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);
}
هەڵسوکەوتی جاڤاسکڕێپت
پێوەکراوەکەی جاڤاسکڕێپتی تاب بەکاربهێنە-بە تاک یان لە ڕێگەی 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>
بەکارهێنانی تایبەتمەندیەکانی داتا
دەتوانیت گەشتکردن بە گروپی لیست چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن 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>
لە ڕێگەی جاڤاسکڕێپتەوە
بابەتی لیستی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر بابەتێکی لیستەکە پێویستە بە تاک چالاک بکرێت):
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
توخمێکی بابەتی لیست و دەفری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا data-bs-target
یان گرێیەکی ئامانجدار بکات.href
<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()
فڕێ بدە
تابی توخمێک لەناو دەبات.
getInstance
شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
ڕووداوەکان
لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:
hide.bs.tab
(لە تابە چالاکەکەی ئێستا)show.bs.tab
(لە سەر تابی پیشان دەدرێت)hidden.bs.tab
(لە تابی چالاک پێشوودا، هەمان تابی بۆhide.bs.tab
ڕووداوەکە)shown.bs.tab
(لە تابی تازە چالاک کە تازە پیشان دراوە، هەمان تابی بۆshow.bs.tab
ڕووداوەکە)
ئەگەر پێشتر هیچ تابێک چالاک نەبووە، ڕووداوەکانی hide.bs.tab
و hidden.bs.tab
تەقە ناکرێن.
جۆری ڕووداو | وەسف |
---|---|
show.bs.tab |
ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت. |
shown.bs.tab |
ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت. |
hide.bs.tab |
ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت. |
hidden.bs.tab |
ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت. |
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
})
}