Krmarjenje in zavihki
Dokumentacija in primeri uporabe vključenih navigacijskih komponent Bootstrapa.
Osnovna nav
Navigacija, ki je na voljo v Bootstrapu, ima skupno oznako in sloge, od osnovnega .nav
razreda do aktivnih in onemogočenih stanj. Zamenjajte razrede modifikatorjev za preklapljanje med posameznimi slogi.
Osnovna .nav
komponenta je zgrajena s flexboxom in zagotavlja trdne temelje za izdelavo vseh vrst navigacijskih komponent. Vključuje nekaj preglasitev sloga (za delo s seznami), nekaj oblazinjenja povezav za večja območja zadetkov in osnovno onemogočeno oblikovanje.
Osnovna .nav
komponenta ne vključuje nobenega .active
stanja. Naslednji primeri vključujejo razred, predvsem zato, da pokažejo, da ta določen razred ne sproži nobenega posebnega sloga.
Za posredovanje aktivnega stanja podpornim tehnologijam uporabite aria-current
atribut — z uporabo page
vrednosti za trenutno stran ali true
za trenutni element v nizu.
<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>
Razredi se uporabljajo povsod, zato je lahko vaša oznaka izjemno prilagodljiva. Uporabite <ul>
s kot zgoraj, <ol>
če je vrstni red vaših predmetov pomemben, ali zavrtite svojega z <nav>
elementom. Zaradi .nav
uporabe display: flex
se navigacijske povezave obnašajo enako kot navigacijski elementi, vendar brez dodatnih oznak.
<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>
Razpoložljivi slogi
Spremenite slog .nav
komponente s z modifikatorji in pripomočki. Mešajte in kombinirajte po potrebi ali sestavite svojega.
Vodoravna poravnava
Spremenite vodoravno poravnavo vaše navigacije s pripomočki flexbox . Krmarjenja so privzeto poravnana levo, vendar jih lahko preprosto spremenite tako, da so poravnana na sredino ali desno.
Na sredini z .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>
Desno poravnano z .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>
Navpično
.flex-column
Zložite svojo navigacijo tako, da s pripomočkom spremenite smer fleksibilnega elementa . Jih morate zložiti na nekatera vidna okna, na druga pa ne? Uporabite odzivne različice (npr. .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>
Kot vedno je navpična navigacija možna <ul>
tudi brez 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>
Zavihki
Vzame osnovno krmarjenje od zgoraj in doda .nav-tabs
razred za ustvarjanje vmesnika z zavihki. Uporabite jih za ustvarjanje regij, ki jih je mogoče zavihati, z našim vtičnikom za zavihke JavaScript .
<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>
Tablete
Vzemite isti HTML, vendar .nav-pills
namesto tega uporabite:
<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>
Izpolnite in utemeljite
Prisilite svojo .nav
vsebino, da razširi celotno razpoložljivo širino enega od dveh razredov modifikatorjev. Če želite sorazmerno zapolniti ves razpoložljivi prostor s svojim .nav-item
s, uporabite .nav-fill
. Upoštevajte, da je ves vodoravni prostor zaseden, vendar nima vsak navigacijski element enake širine.
<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>
Pri uporabi <nav>
navigacije, ki temelji na -, lahko varno izpustite .nav-item
, saj .nav-link
je to potrebno samo za <a>
elemente sloga.
<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>
Za elemente enake širine uporabite .nav-justified
. Ves vodoravni prostor bodo zasedle povezave za krmarjenje, vendar bo za razliko od .nav-fill
zgoraj navedenega vsak element krmarjenja enake širine.
<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>
Podobno kot v .nav-fill
primeru uporabe <nav>
navigacije na osnovi.
<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>
Delo s pripomočki flex
Če potrebujete različice odzivne navigacije, razmislite o uporabi niza pripomočkov flexbox . Čeprav so bolj podrobni, ti pripomočki ponujajo večjo prilagoditev med odzivnimi prekinitvenimi točkami. V spodnjem primeru bo naše krmarjenje zloženo na najnižjo prelomno točko, nato pa se bo prilagodilo vodoravni postavitvi, ki zapolni razpoložljivo širino, začenši z majhno prelomno točko.
<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>
Glede dostopnosti
Če uporabljate navs za zagotavljanje navigacijske vrstice, ne pozabite dodati role="navigation"
v najbolj logičen nadrejeni vsebnik <ul>
ali ovijte <nav>
element okoli celotne navigacije. Ne dodajajte vloge <ul>
samemu, saj bi to preprečilo, da bi jo podporne tehnologije objavile kot dejanski seznam.
Upoštevajte, da navigacijskim vrsticam, tudi če so vizualno oblikovane kot zavihki z .nav-tabs
razredom, ne smete dodeliti atributov ali . Ti so primerni le za dinamične vmesnike z zavihki, kot je opisano v avtorskih praksah WAI ARIA . Za primer si oglejte obnašanje JavaScripta za dinamične vmesnike z zavihki v tem razdelku. Atribut ni potreben na dinamičnih vmesnikih z zavihki, saj naš JavaScript obravnava izbrano stanje z dodajanjem na aktivni zavihek.role="tablist"
role="tab"
role="tabpanel"
aria-current
aria-selected="true"
Uporaba spustnih menijev
Dodajte spustne menije z malo dodatnega HTML-ja in spustnega vtičnika JavaScript .
Zavihki s spustnimi meniji
<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>
Tablete s spustnimi listi
<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
Spremenljivke
$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;
obnašanje JavaScripta
Uporabite vtičnik JavaScript za zavihke – vključite ga posamezno ali prek prevedene bootstrap.js
datoteke – za razširitev naših navigacijskih zavihkov in pilule za ustvarjanje podokna z zavihki lokalne vsebine.
Dinamični vmesniki z zavihki, kot je opisano v avtorskih praksah WAI ARIA , zahtevajo role="tablist"
, role="tab"
, role="tabpanel"
, in dodatne aria-
atribute, da svojo strukturo, funkcionalnost in trenutno stanje posredujejo uporabnikom podpornih tehnologij (kot so bralniki zaslona). Kot najboljšo prakso priporočamo uporabo <button>
elementov za zavihke, saj so to kontrolniki, ki sprožijo dinamično spremembo, namesto povezav, ki vodijo do nove strani ali lokacije.
Upoštevajte, da vmesniki z dinamičnimi zavihki ne smejo vsebovati spustnih menijev, saj to povzroča težave z uporabnostjo in dostopnostjo. Z vidika uporabnosti lahko dejstvo, da sprožilni element trenutno prikazanega zavihka ni takoj viden (saj je znotraj zaprtega spustnega menija), lahko povzroči zmedo. Z vidika dostopnosti trenutno ni nobenega razumnega načina za preslikavo te vrste konstrukta v standardni vzorec WAI ARIA, kar pomeni, da ga ni mogoče enostavno narediti razumljivega uporabnikom podpornih tehnologij.
To je nekaj nadomestne vsebine, povezane z vsebino zavihka Domov. Če kliknete drug zavihek, boste preklopili vidnost tega za naslednjega. Zavihek JavaScript zamenja razrede za nadzor vidnosti in sloga vsebine. Uporabljate ga lahko z zavihki, tabletami in katero koli drugo .nav
navigacijo.
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>
Da bi ustrezal vašim potrebam, to deluje z <ul>
oznako, ki temelji na osnovi, kot je prikazano zgoraj, ali s katero koli poljubno oznako »razvijte svoje«. Upoštevajte, da če uporabljate <nav>
, mu ne smete dodajati role="tablist"
neposredno, saj bi to preglasilo izvorno vlogo elementa kot navigacijskega orientacijskega znaka. Namesto tega preklopite na alternativni element (v spodnjem primeru preprost <div>
) in ovijte <nav>
okoli njega.
<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>
Vtičnik tabs deluje tudi s tabletami.
To je nekaj nadomestne vsebine, povezane z vsebino zavihka Domov. Če kliknete drug zavihek, boste preklopili vidnost tega za naslednjega. Zavihek JavaScript zamenja razrede za nadzor vidnosti in sloga vsebine. Uporabljate ga lahko z zavihki, tabletami in katero koli drugo .nav
navigacijo.
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>
In z navpičnimi tabletami.
To je nekaj nadomestne vsebine, povezane z vsebino zavihka Domov. Če kliknete drug zavihek, boste preklopili vidnost tega za naslednjega. Zavihek JavaScript zamenja razrede za nadzor vidnosti in sloga vsebine. Uporabljate ga lahko z zavihki, tabletami in katero koli drugo .nav
navigacijo.
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>
Uporaba podatkovnih atributov
Navigacijo po zavihku ali tabletki lahko aktivirate, ne da bi pisali JavaScript, tako da preprosto določite data-bs-toggle="tab"
ali data-bs-toggle="pill"
na elementu. Uporabite te atribute podatkov na .nav-tabs
ali .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>
Prek JavaScripta
Omogoči zavihke z možnostjo zavihkov prek JavaScripta (vsak zavihek je treba aktivirati posebej):
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()
})
})
Posamezne zavihke lahko aktivirate na več načinov:
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
Učinek bledenja
Če želite, da zavihki zbledijo, dodajte .fade
vsakemu .tab-pane
. V prvem podoknu z zavihki mora biti .show
vidna tudi začetna vsebina.
<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
Asinhrone metode in prehodi
Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .
Za več informacij si oglejte našo dokumentacijo JavaScript .
constructor
Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti atribut data-bs-target
ali, če uporabljate povezavo, href
atribut, ki cilja na vozlišče vsebnika v 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>
pokazati
Izbere dani zavihek in prikaže povezano podokno. Kateri koli drug zavihek, ki je bil prej izbran, postane neizbran in njegovo povezano podokno je skrito. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (tj. preden shown.bs.tab
pride do dogodka).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
odstraniti
Uniči zavihek elementa.
getInstance
Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Dogodki
Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:
hide.bs.tab
(na trenutno aktivnem zavihku)show.bs.tab
(na zavihku za prikaz)hidden.bs.tab
(na prejšnjem aktivnem zavihku, enak kot zahide.bs.tab
dogodek)shown.bs.tab
(na novoaktivnem pravkar prikazanem zavihku, isti kot zashow.bs.tab
dogodek)
Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tab
in hidden.bs.tab
ne bodo sprožili.
Vrsta dogodka | Opis |
---|---|
show.bs.tab |
Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite event.target in event.relatedTarget za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo). |
shown.bs.tab |
Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite event.target in event.relatedTarget za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo). |
hide.bs.tab |
Ta dogodek se sproži, ko je treba prikazati nov zavihek (in tako naj bi bil prejšnji aktivni zavihek skrit). Uporabite event.target in event.relatedTarget za ciljanje na trenutni aktivni zavihek oziroma novi zavihek, ki bo kmalu aktiven. |
hidden.bs.tab |
Ta dogodek se sproži, ko je prikazan nov zavihek (in tako je prejšnji aktivni zavihek skrit). Uporabite event.target in event.relatedTarget za ciljanje prejšnjega aktivnega zavihka oziroma novega aktivnega zavihka. |
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
})