Navs ati awọn taabu
Iwe ati awọn apẹẹrẹ fun bi o ṣe le lo Bootstrap pẹlu awọn paati lilọ kiri.
Base nav
Lilọ kiri ni Bootstrap pin isamisi gbogbogbo ati awọn aza, lati .nav
kilasi ipilẹ si awọn ipinlẹ ti nṣiṣe lọwọ ati alaabo. Yipada awọn kilasi modifier lati yipada laarin ara kọọkan.
A ṣe ipilẹ .nav
paati ipilẹ pẹlu flexbox ati pese ipilẹ to lagbara fun kikọ gbogbo awọn iru awọn paati lilọ kiri. O pẹlu diẹ ninu awọn ifasilẹ ara (fun ṣiṣẹ pẹlu awọn atokọ), diẹ ninu awọn padding ọna asopọ fun awọn agbegbe to buruju nla, ati aṣa alaabo ipilẹ.
Ẹya ipilẹ .nav
ko pẹlu eyikeyi .active
ipinle. Awọn apẹẹrẹ atẹle pẹlu kilasi naa, ni pataki lati ṣafihan pe kilasi kan pato ko ṣe okunfa eyikeyi iselona pataki.
Lati fihan ipo ti nṣiṣe lọwọ si awọn imọ-ẹrọ iranlọwọ, lo aria-current
abuda — lilo page
iye fun oju-iwe lọwọlọwọ, tabi true
fun ohun ti o wa lọwọlọwọ ninu eto kan.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Awọn kilasi ni a lo jakejado, nitorinaa isamisi rẹ le rọ pupọ. Lo <ul>
s bii loke, <ol>
ti aṣẹ awọn nkan rẹ ba ṣe pataki, tabi yi tirẹ pẹlu <nav>
eroja kan. Nitori awọn .nav
lilo display: flex
, awọn ọna asopọ nav huwa kanna bi awọn ohun nav yoo ṣe, ṣugbọn laisi ami iyasọtọ.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Awọn aṣa ti o wa
Yi awọn ara ti .nav
s paati pẹlu modifiers ati igbesi. Illa ati baramu bi o ti nilo, tabi kọ ara rẹ.
Petele titete
Yi titete petele ti nav rẹ pẹlu awọn ohun elo flexbox . Nipa aiyipada, awọn navs ti wa ni deede si apa osi, ṣugbọn o le ni rọọrun yi wọn pada si aarin tabi titọ ọtun.
Aarin pẹlu .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ni ibamu-ọtun pẹlu .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Inaro
Ṣe akopọ lilọ kiri rẹ nipa yiyipada itọsọna ohun kan Flex pẹlu ohun .flex-column
elo naa. Nilo lati akopọ wọn lori diẹ ninu awọn iwo oju ṣugbọn kii ṣe awọn miiran? Lo awọn ẹya idahun (fun apẹẹrẹ, .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Gẹgẹbi nigbagbogbo, lilọ kiri inaro ṣee ṣe laisi <ul>
s, paapaa.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Awọn taabu
Mu awọn nav ipilẹ lati oke ati afikun .nav-tabs
kilasi lati se ina kan tabbed ni wiwo. Lo wọn lati ṣẹda awọn agbegbe tabbable pẹlu wa taabu JavaScript itanna .
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Awọn oogun
Mu HTML kanna, ṣugbọn lo .nav-pills
dipo:
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Kun ati ki o da
Fi ipa mu .nav
awọn akoonu inu rẹ lati faagun ni kikun iwọn ti o wa ọkan ninu awọn kilasi modifier meji. Lati kun gbogbo aaye to wa ni iwọn pẹlu .nav-item
s rẹ, lo .nav-fill
. Akiyesi pe gbogbo petele aaye ti wa ni ti tẹdo, sugbon ko gbogbo nav ohun kan ni o ni kanna iwọn.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Nigbati o ba nlo <nav>
lilọ kiri-orisun, o le yọkuro lailewu .nav-item
bi o ṣe .nav-link
nilo nikan fun <a>
awọn eroja aṣa.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Fun awọn eroja iwọn dogba, lo .nav-justified
. Gbogbo aaye petele yoo gba nipasẹ awọn ọna asopọ nav, ṣugbọn ko dabi .nav-fill
loke, gbogbo ohun nav yoo jẹ iwọn kanna.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Iru si .nav-fill
apẹẹrẹ nipa lilo <nav>
lilọ-orisun.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Nṣiṣẹ pẹlu Flex igbesi
Ti o ba nilo awọn iyatọ nav idahun, ronu nipa lilo lẹsẹsẹ awọn ohun elo flexbox . Lakoko ti ọrọ-ọrọ diẹ sii, awọn ohun elo wọnyi nfunni ni isọdi nla kọja awọn aaye ifasilẹ idahun. Ni awọn apẹẹrẹ ni isalẹ, nav wa yoo wa ni tolera lori awọn ni asuwon ti breakpoint, ki o si orisirisi si si a petele akọkọ ti o kun awọn iwọn ti o wa ti o bere lati kekere breakpoint.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Nipa wiwọle
Ti o ba nlo awọn navs lati pese ọpa lilọ kiri, rii daju lati ṣafikun kan role="navigation"
si apoti obi ti oye julọ ti <ul>
, tabi fi ipari si ohun <nav>
kan ni ayika gbogbo lilọ kiri. Maṣe ṣafikun ipa naa si <ul>
funrararẹ, nitori eyi yoo ṣe idiwọ lati kede bi atokọ gangan nipasẹ awọn imọ-ẹrọ iranlọwọ.
Ṣe akiyesi pe awọn ọpa lilọ kiri, paapaa ti oju ba ṣe aṣa bi awọn taabu pẹlu .nav-tabs
kilasi, ko yẹ ki o fun role="tablist"
, role="tab"
tabi role="tabpanel"
awọn abuda. Iwọnyi jẹ deede nikan fun awọn atọkun tabbed ti o ni agbara, bi a ti ṣe apejuwe rẹ ninu Awọn iṣe Onkọwe WAI ARIA . Wo JavaScript ihuwasi fun ìmúdàgba tabbed atọkun ni yi apakan fun apẹẹrẹ. Ẹya aria-current
naa ko ṣe pataki lori awọn atọkun tabbed ti o ni agbara niwọn igba ti JavaScript wa mu ipo ti o yan nipa fifi kun aria-selected="true"
lori taabu ti nṣiṣe lọwọ.
Lilo awọn dropdowns
Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript awọn silẹ .
Awọn taabu pẹlu dropdowns
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ìşọmọbí pẹlu dropdowns
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Sass
Awọn oniyipada
$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;
JavaScript ihuwasi
Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.js
faili ti a ṣajọpọ—lati faagun awọn taabu lilọ kiri wa ati awọn oogun lati ṣẹda awọn pane ti akoonu agbegbe.
Awọn atọkun tabbed ti o ni agbara, gẹgẹbi a ti ṣe apejuwe rẹ ninu Awọn Ilana Akọwe WAI ARIA , nilo role="tablist"
, role="tab"
, role="tabpanel"
, ati awọn aria-
eroja afikun lati le sọ eto wọn, iṣẹ ṣiṣe ati ipo lọwọlọwọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ (gẹgẹbi awọn oluka iboju). Gẹgẹbi iṣe ti o dara julọ, a ṣeduro lilo <button>
awọn eroja fun awọn taabu, nitori iwọnyi jẹ awọn idari ti o nfa iyipada agbara, dipo awọn ọna asopọ ti o lọ kiri si oju-iwe tuntun tabi ipo.
Ṣe akiyesi pe awọn atọkun tabbed ti o ni agbara ko yẹ ki o ni awọn akojọ aṣayan silẹ, nitori eyi fa mejeeji lilo ati awọn ọran iraye si. Lati irisi lilo, otitọ pe eroja okunfa taabu ti o han lọwọlọwọ ko han lẹsẹkẹsẹ (bi o ti wa ninu akojọ aṣayan silẹ pipade) le fa iporuru. Lati oju iwoye wiwọle, lọwọlọwọ ko si ọna ti o ni oye lati ṣe maapu iru ikole yii si apẹrẹ WAI ARIA boṣewa, afipamo pe ko le ṣe ni irọrun ni oye si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.
Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav
-agbara lilọ kiri.
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>
Lati ṣe iranlọwọ lati baamu awọn iwulo rẹ, eyi n ṣiṣẹ pẹlu <ul>
isamisi-orisun, bi a ṣe han loke, tabi pẹlu isamisi “yi tirẹ” lainidii. Ṣe akiyesi pe ti o ba nlo <nav>
, o ko yẹ ki o ṣafikun role="tablist"
taara si rẹ, nitori eyi yoo dojui ipa abinibi eroja bi ami-ilẹ lilọ kiri. Dipo, yipada si ohun elo miiran (ni apẹẹrẹ ni isalẹ, rọrun <div>
) ki o fi ipari si ni <nav>
ayika rẹ.
<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>
Awọn itanna awọn taabu tun ṣiṣẹ pẹlu awọn oogun.
Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav
-agbara lilọ kiri.
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>
Ati pẹlu inaro ìşọmọbí.
Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav
-agbara lilọ kiri.
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>
Lilo awọn abuda data
O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-bs-toggle="tab"
tabi data-bs-toggle="pill"
lori nkan kan. Lo awọn abuda data wọnyi lori .nav-tabs
tabi .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>
Nipasẹ JavaScript
Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):
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()
})
})
O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:
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
Ipa ipare
Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fade
si ọkọọkan .tab-pane
. PAN taabu akọkọ gbọdọ tun ni .show
lati jẹ ki akoonu ibẹrẹ han.
<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>
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
constructor
Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-bs-target
tabi, ti o ba nlo ọna asopọ kan href
, abuda kan, ti o fojusi oju ipade apoti kan ninu 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 a')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
ifihan
Yan taabu ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati pe iwe ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tab
iṣẹlẹ naa to waye).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
sọnù
Pa taabu eroja run.
gbaInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM kan
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
gbaOrCreateInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Awọn iṣẹlẹ
Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:
hide.bs.tab
(lori taabu lọwọ lọwọlọwọ)show.bs.tab
(lori taabu ti yoo han)hidden.bs.tab
(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna funhide.bs.tab
iṣẹlẹ naa)shown.bs.tab
(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna funshow.bs.tab
iṣẹlẹ naa)
Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tab
ati awọn hidden.bs.tab
iṣẹlẹ kii yoo jẹ ina.
Iru iṣẹlẹ | Apejuwe |
---|---|
show.bs.tab |
Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) lẹsẹsẹ. |
shown.bs.tab |
Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) lẹsẹsẹ. |
hide.bs.tab |
Iṣẹlẹ yii n tan nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.target ati event.relatedTarget lati dojukọ taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun laipẹ-lati jẹ lọwọ, ni atele. |
hidden.bs.tab |
Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ. |
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
})