گروه لیست
گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.
مثال اساسی
ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های بعدی یا در صورت نیاز با 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 یا <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>
محتوای دلخواه
تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمک ابزارهای flexbox .
عنوان مورد گروه را فهرست کنید
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()
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);
}
رفتار جاوا اسکریپت
از افزونه جاوا اسکریپت زبانه استفاده کنید - آن را به صورت جداگانه یا از طریق 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
یک عنصر فهرست و محفظه محتوا را فعال می کند. Tab باید دارای یک 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()
در معرض قرار دادن
تب یک عنصر را از بین می برد.
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
})
}