Navs kaj langetoj
Dokumentado kaj ekzemploj pri kiel uzi la inkluditajn navigadajn komponantojn de Bootstrap.
Baznav
Navigado disponebla en Bootstrap kunhavas ĝeneralan markadon kaj stilojn, de la baza .nav
klaso ĝis la aktivaj kaj malfunkciigitaj ŝtatoj. Interŝanĝu modifklasojn por ŝanĝi inter ĉiu stilo.
La baza .nav
komponanto estas konstruita kun flexbox kaj provizas fortan fundamenton por konstrui ĉiajn navigajn komponantojn. Ĝi inkluzivas iujn stilajn anstataŭojn (por labori kun listoj), iujn ligilojn por pli grandaj trafaj areoj kaj bazan malfunkciigitan stilon.
La baza .nav
komponanto ne inkluzivas ajnan .active
ŝtaton. La sekvaj ekzemploj inkluzivas la klason, ĉefe por pruvi, ke ĉi tiu aparta klaso ne ekigas ajnan specialan stilon.
Por transdoni la aktivan staton al helpaj teknologioj, uzu la aria-current
atributon — uzante la page
valoron por nuna paĝo aŭ true
por la nuna ero en aro.
<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>
Klasoj estas uzataj ĉie, do via markado povas esti tre fleksebla. Uzu <ul>
s kiel supre, <ol>
se la ordo de viaj aĵoj estas grava, aŭ rulu vian propran per <nav>
elemento. Ĉar la .nav
uzoj display: flex
, la nav-ligiloj kondutas same kiel nav-eroj, sed sen la ekstra markado.
<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>
Disponeblaj stiloj
Ŝanĝu la stilon de .nav
s-komponento per modifiloj kaj utilecoj. Miksu kaj kongruu laŭbezone, aŭ konstruu vian propran.
Horizontala vicigo
Ŝanĝu la horizontalan vicigon de via nav per flexbox -utiloj . Defaŭlte, navigacioj estas maldekstre vicigitaj, sed vi povas facile ŝanĝi ilin al centra aŭ dekstre vicigitaj.
Centrita kun .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>
Dekstre vicigita kun .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>
Vertikala
Staku vian navigadon ŝanĝante la flekseblan direkton per la .flex-column
ilo. Ĉu vi bezonas stakigi ilin sur iuj videjoj sed ne aliaj? Uzu la respondemajn versiojn (ekz., .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>
Kiel ĉiam, vertikala navigado ankaŭ eblas sen <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>
Langetoj
Prenas la bazan navigacion de supre kaj aldonas la .nav-tabs
klason por generi langetan interfacon. Uzu ilin por krei tabulajn regionojn per nia langeto JavaScript-kromaĵo .
<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>
Piloloj
Prenu tiun saman HTML, sed uzu .nav-pills
anstataŭe:
<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>
Plenigu kaj pravigu
Devigu vian .nav
enhavon etendi la plenan disponeblan larĝon unu el du modifklasoj. Por proporcie plenigi la tutan disponeblan spacon per viaj .nav-item
s, uzu .nav-fill
. Rimarku, ke la tuta horizontala spaco estas okupita, sed ne ĉiu nav-elemento havas la saman larĝon.
<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>
Kiam vi uzas <nav>
navigadon, vi povas sekure preterlasi .nav-item
kiel nur .nav-link
necesas por stilaj <a>
elementoj.
<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>
Por egallarĝaj elementoj, uzu .nav-justified
. La tuta horizontala spaco estos okupita de nav-ligiloj, sed male al la .nav-fill
supre, ĉiu nav-elemento estos la sama larĝo.
<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>
Simile al la .nav-fill
ekzemplo uzante <nav>
-bazitan navigacion.
<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>
Laborante kun fleksaj utilecoj
Se vi bezonas respondemajn nav-variojn, konsideru uzi serion de flexbox-ilaĵoj . Kvankam pli multvortaj, ĉi tiuj iloj ofertas pli grandan personigon tra respondemaj rompopunktoj. En la malsupra ekzemplo, nia navigacio estos stakigita sur la plej malalta rompopunkto, tiam adaptiĝos al horizontala aranĝo, kiu plenigas la disponeblan larĝon ekde la malgranda rompopunkto.
<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>
Pri alirebleco
Se vi uzas navs por provizi navigadbreton, nepre aldonu role="navigation"
al la plej logika gepatra ujo de la <ul>
, aŭ envolvu <nav>
elementon ĉirkaŭ la tuta navigado. Ne aldonu la rolon al la <ul>
mem, ĉar tio malhelpus ĝin esti anoncita kiel reala listo de helpaj teknologioj.
Notu, ke navigadbretoj, eĉ se vide stilitaj kiel langetoj kun la .nav-tabs
klaso, ne devus esti donitaj role="tablist"
, role="tab"
aŭ role="tabpanel"
atributoj. Ĉi tiuj taŭgas nur por dinamikaj klapetaj interfacoj, kiel priskribite en la Praktikoj pri Aŭtorado de WAI ARIA . Vidu JavaScript-konduton por dinamikaj langetaj interfacoj en ĉi tiu sekcio por ekzemplo. La aria-current
atributo ne estas necesa ĉe dinamikaj langetaj interfacoj ĉar nia JavaScript pritraktas la elektitan staton aldonante aria-selected="true"
la aktivan langeton.
Uzante falmenuojn
Aldonu falmenuojn kun iom kroma HTML kaj la falmenuojn JavaScript kromaĵo .
Langetoj kun falmenuoj
<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>
Piloloj kun falmenuoj
<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>
Sass
Variabloj
$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 konduto
Uzu la langeton JavaScript-kromaĵon—inkludu ĝin individue aŭ per la kompilita bootstrap.js
dosiero—por etendi niajn navigaciajn langetojn kaj pilolojn por krei tabeleblajn fenestrojn de loka enhavo.
Dinamikaj klapetinterfacoj, kiel priskribite en la WAI ARIA Aŭtorado-Praktikoj , postulas role="tablist"
, role="tab"
, role="tabpanel"
, kaj kromajn aria-
atributojn por peri sian strukturon, funkciecon kaj nunan staton al uzantoj de helpaj teknologioj (kiel ekzemple ekranlegiloj). Kiel plej bona praktiko, ni rekomendas uzi <button>
elementojn por la langetoj, ĉar ĉi tiuj estas kontroloj kiuj ekigas dinamikan ŝanĝon, prefere ol ligiloj kiuj navigas al nova paĝo aŭ loko.
Notu, ke dinamikaj klapetaj interfacoj ne devus enhavi falmenuojn, ĉar tio kaŭzas problemojn pri uzeblo kaj alirebleco. De uzeblo-perspektivo, la fakto, ke la ellasilelemento de la aktuale montrita langeto ne estas tuj videbla (ĉar ĝi estas ene de la fermita falmenuo) povas kaŭzi konfuzon. De alirebleco vidpunkto, ekzistas nuntempe neniu prudenta maniero mapi ĉi tiun specon de konstrukcio al norma WAI ARIA-ŝablono, signifante ke ĝi ne povas esti facile komprenebla por uzantoj de helpaj teknologioj.
Ĉi tio estas iu lokokupilo enhavo de la Hejma langeto asociita enhavo. Alklakante alian langeton malŝaltos la videblecon de ĉi tiu por la sekva. La langeto JavaScript interŝanĝas klasojn por kontroli la enhavvideblon kaj stilon. Vi povas uzi ĝin per langetoj, piloloj kaj ajna alia .nav
navigado.
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>
Por helpi adapti viajn bezonojn, ĉi tio funkcias kun <ul>
-bazita markado, kiel montrite supre, aŭ kun ajna arbitra "ruli vian propran" markadon. Notu, ke se vi uzas <nav>
, vi ne aldonu role="tablist"
rekte al ĝi, ĉar ĉi tio superregus la denaskan rolon de la elemento kiel navigada orientilo. Anstataŭe, ŝanĝu al alternativa elemento (en la malsupra ekzemplo, simpla <div>
) kaj envolvu <nav>
ĝin ĉirkaŭ ĝi.
<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>
La tabs kromaĵo ankaŭ funkcias kun piloloj.
Ĉi tio estas iu lokokupilo enhavo de la Hejma langeto asociita enhavo. Alklakante alian langeton malŝaltos la videblecon de ĉi tiu por la sekva. La langeto JavaScript interŝanĝas klasojn por kontroli la enhavvideblon kaj stilon. Vi povas uzi ĝin per langetoj, piloloj kaj ajna alia .nav
navigado.
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>
Kaj kun vertikalaj piloloj.
Ĉi tio estas iu lokokupilo enhavo de la Hejma langeto asociita enhavo. Alklakante alian langeton malŝaltos la videblecon de ĉi tiu por la sekva. La langeto JavaScript interŝanĝas klasojn por kontroli la enhavvideblon kaj stilon. Vi povas uzi ĝin per langetoj, piloloj kaj ajna alia .nav
navigado.
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>
Uzante datumajn atributojn
Vi povas aktivigi langeton aŭ pilolan navigadon sen skribi JavaScript per simple specifi data-bs-toggle="tab"
aŭ data-bs-toggle="pill"
sur elemento. Uzu ĉi tiujn datumajn atributojn sur .nav-tabs
aŭ .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>
Per JavaScript
Ebligu tabulajn langetojn per JavaScript (ĉiu langeto devas esti aktivigita individue):
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()
})
})
Vi povas aktivigi individuajn langetojn en pluraj manieroj:
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
Fade efiko
Por ke klapetoj fadiĝu, aldonu .fade
al ĉiu .tab-pane
. La unua klapeta panelo ankaŭ devas .show
vidigi la komencan enhavon.
<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>
Metodoj
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
constructor
Aktivigas langeto-elementon kaj enhavujon. Tab devus havi data-bs-target
aŭ, se vi uzas ligilon, href
atributon, celante ujo-nodon en la 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>
montri
Elektas la donitan langeton kaj montras ĝian rilatan panelon. Ajna alia langeto, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata panelo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive estis montrita (te antaŭ ol la shown.bs.tab
evento okazas).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
disponi
Detruas la langeton de elemento.
getInstance
Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Eventoj
Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:
hide.bs.tab
(en la nuna aktiva langeto)show.bs.tab
(en la montrota langeto)hidden.bs.tab
(sur la antaŭa aktiva langeto, la sama kiel por lahide.bs.tab
evento)shown.bs.tab
(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por lashow.bs.tab
evento)
Se neniu langeto jam estis aktiva, tiam la eventoj hide.bs.tab
kaj hidden.bs.tab
ne estos pafitaj.
Eventa tipo | Priskribo |
---|---|
show.bs.tab |
Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
shown.bs.tab |
Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
hide.bs.tab |
Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu event.target kaj event.relatedTarget por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive. |
hidden.bs.tab |
Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu event.target kaj event.relatedTarget por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive. |
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
})