Nav dan tab
Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan pada Bootstrap.
navigasi dasar
Navigasi yang tersedia di Bootstrap berbagi markup dan gaya umum, dari .nav
kelas dasar hingga status aktif dan nonaktif. Tukar kelas pengubah untuk beralih di antara setiap gaya.
Komponen dasar .nav
dibangun dengan flexbox dan memberikan fondasi yang kuat untuk membangun semua jenis komponen navigasi. Ini mencakup beberapa penggantian gaya (untuk bekerja dengan daftar), beberapa bantalan tautan untuk area hit yang lebih besar, dan gaya dasar yang dinonaktifkan.
Komponen dasar .nav
tidak menyertakan .active
status apa pun. Contoh berikut menyertakan kelas, terutama untuk menunjukkan bahwa kelas khusus ini tidak memicu gaya khusus apa pun.
Untuk menyampaikan status aktif ke teknologi bantu, gunakan aria-current
atribut — menggunakan page
nilai untuk halaman saat ini, atau true
untuk item saat ini dalam satu set.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Kelas digunakan di seluruh, sehingga markup Anda bisa sangat fleksibel. Gunakan <ul>
s seperti di atas, <ol>
jika urutan item Anda penting, atau gulung sendiri dengan <nav>
elemen. Karena .nav
kegunaan display: flex
, tautan nav berperilaku sama seperti item nav, tetapi tanpa markup tambahan.
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Gaya yang tersedia
Ubah gaya .nav
komponen s dengan pengubah dan utilitas. Campur dan cocokkan sesuai kebutuhan, atau buat sendiri.
Perataan horizontal
Ubah perataan horizontal nav Anda dengan utilitas flexbox . Secara default, navigasi rata kiri, tetapi Anda dapat dengan mudah mengubahnya menjadi rata tengah atau kanan.
Dipusatkan dengan .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Rata kanan dengan .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Vertikal
Tumpuk navigasi Anda dengan mengubah arah item fleksibel dengan .flex-column
utilitas. Perlu menumpuknya di beberapa viewport tetapi tidak di yang lain? Gunakan versi responsif (mis., .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Seperti biasa, navigasi vertikal juga dimungkinkan tanpa <ul>
s.
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
tab
Mengambil navigasi dasar dari atas dan menambahkan .nav-tabs
kelas untuk menghasilkan antarmuka tab. Gunakan mereka untuk membuat wilayah tab dengan plugin JavaScript tab kami .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
pil
Ambil HTML yang sama, tetapi gunakan .nav-pills
sebagai gantinya:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Isi dan beri alasan
Paksa .nav
konten Anda untuk memperluas lebar penuh yang tersedia salah satu dari dua kelas pengubah. Untuk mengisi semua ruang yang tersedia secara proporsional dengan .nav-item
s Anda, gunakan .nav-fill
. Perhatikan bahwa semua ruang horizontal ditempati, tetapi tidak setiap item navigasi memiliki lebar yang sama.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Saat menggunakan <nav>
navigasi berbasis, Anda dapat dengan aman menghilangkannya .nav-item
karena hanya .nav-link
diperlukan untuk <a>
elemen gaya.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Untuk elemen dengan lebar yang sama, gunakan .nav-justified
. Semua ruang horizontal akan ditempati oleh tautan nav, tetapi tidak seperti di .nav-fill
atas, setiap item nav akan memiliki lebar yang sama.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Mirip dengan .nav-fill
contoh menggunakan <nav>
navigasi berbasis.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Bekerja dengan utilitas fleksibel
Jika Anda memerlukan variasi navigasi responsif, pertimbangkan untuk menggunakan serangkaian utilitas flexbox . Meskipun lebih bertele-tele, utilitas ini menawarkan penyesuaian yang lebih besar di seluruh breakpoint responsif. Pada contoh di bawah ini, nav kita akan ditumpuk pada breakpoint terendah, kemudian beradaptasi dengan layout horizontal yang mengisi lebar yang tersedia mulai dari breakpoint kecil.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
Mengenai aksesibilitas
Jika Anda menggunakan navs untuk menyediakan bilah navigasi, pastikan untuk menambahkan a role="navigation"
ke wadah induk paling logis dari <ul>
, atau bungkus <nav>
elemen di seluruh navigasi. Jangan menambahkan peran <ul>
itu sendiri, karena ini akan mencegahnya diumumkan sebagai daftar aktual oleh teknologi bantu.
Perhatikan bahwa bilah navigasi, meskipun secara visual ditata sebagai tab dengan .nav-tabs
kelas, tidak boleh diberikan role="tablist"
, role="tab"
atau role="tabpanel"
atribut. Ini hanya sesuai untuk antarmuka tab dinamis, seperti yang dijelaskan dalam Praktik Penulisan WAI ARIA . Lihat perilaku JavaScript untuk antarmuka tab dinamis di bagian ini sebagai contoh. Atribut aria-current
tidak diperlukan pada antarmuka tab dinamis karena JavaScript kami menangani status yang dipilih dengan menambahkan aria-selected="true"
pada tab aktif.
Menggunakan dropdown
Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .
Tab dengan dropdown
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Pil dengan dropdown
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Kelancangan
Variabel
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: $link-color;
$nav-link-hover-color: $link-hover-color;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
Perilaku JavaScript
Gunakan plugin tab JavaScript—termasuk satu per satu atau melalui file yang dikompilasi bootstrap.js
—untuk memperluas tab dan pil navigasi kami untuk membuat panel konten lokal yang dapat ditabulasi.
Antarmuka tab dinamis, seperti yang dijelaskan dalam WAI ARIA Authoring Practices , memerlukan role="tablist"
, role="tab"
, role="tabpanel"
, dan aria-
atribut tambahan untuk menyampaikan struktur, fungsionalitas, dan statusnya saat ini kepada pengguna teknologi bantu (seperti pembaca layar). Sebagai praktik terbaik, sebaiknya gunakan <button>
elemen untuk tab, karena ini adalah kontrol yang memicu perubahan dinamis, bukan tautan yang menavigasi ke laman atau lokasi baru.
Perhatikan bahwa antarmuka tab dinamis tidak boleh berisi menu tarik-turun, karena ini menyebabkan masalah kegunaan dan aksesibilitas. Dari perspektif kegunaan, fakta bahwa elemen pemicu tab yang saat ini ditampilkan tidak langsung terlihat (karena berada di dalam menu tarik-turun yang tertutup) dapat menyebabkan kebingungan. Dari sudut pandang aksesibilitas, saat ini tidak ada cara yang masuk akal untuk memetakan konstruksi semacam ini ke pola WAI ARIA standar, yang berarti bahwa hal itu tidak dapat dengan mudah dipahami oleh pengguna teknologi bantu.
Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .nav
navigasi bertenaga lainnya.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Untuk membantu memenuhi kebutuhan Anda, ini berfungsi dengan <ul>
markup berbasis, seperti yang ditunjukkan di atas, atau dengan markup "roll your own" yang sewenang-wenang. Perhatikan bahwa jika Anda menggunakan <nav>
, Anda tidak boleh menambahkannya role="tablist"
secara langsung, karena ini akan menggantikan peran asli elemen sebagai tengara navigasi. Alih-alih, alihkan ke elemen alternatif (dalam contoh di bawah, sederhana <div>
) dan bungkus di <nav>
sekitarnya.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Plugin tab juga berfungsi dengan pil.
Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .nav
navigasi bertenaga lainnya.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
Dan dengan pil vertikal.
Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .nav
navigasi bertenaga lainnya.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
Menggunakan atribut data
Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis JavaScript apa pun hanya dengan menentukan data-bs-toggle="tab"
atau data-bs-toggle="pill"
pada suatu elemen. Gunakan atribut data ini pada .nav-tabs
atau .nav-pills
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Melalui JavaScript
Aktifkan tab yang dapat ditabulasi melalui JavaScript (setiap tab harus diaktifkan satu per satu):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Anda dapat mengaktifkan tab individual dengan beberapa cara:
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
efek memudar
Untuk membuat tab memudar, tambahkan .fade
ke masing-masing .tab-pane
. Panel tab pertama juga harus .show
membuat konten awal terlihat.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Metode
Metode dan transisi asinkron
Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .
Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .
constructor
Mengaktifkan elemen tab dan wadah konten. Tab harus memiliki a data-bs-target
atau, jika menggunakan tautan, href
atribut, yang menargetkan simpul penampung di DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
menunjukkan
Memilih tab yang diberikan dan menampilkan panel yang terkait. Tab lain yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (yaitu sebelum shown.bs.tab
peristiwa terjadi).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
membuang
Menghancurkan tab elemen.
dapatkan Instance
Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Acara
Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:
hide.bs.tab
(pada tab aktif saat ini)show.bs.tab
(pada tab yang akan ditampilkan)hidden.bs.tab
(pada tab aktif sebelumnya, sama dengan tabhide.bs.tab
acara)shown.bs.tab
(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untukshow.bs.tab
acara tersebut)
Jika tidak ada tab yang sudah aktif, maka peristiwa hide.bs.tab
and hidden.bs.tab
tidak akan diaktifkan.
Jenis acara | Keterangan |
---|---|
show.bs.tab |
Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia). |
shown.bs.tab |
Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia). |
hide.bs.tab |
Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif. |
hidden.bs.tab |
Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing-masing. |
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})