Navs me nga ripa
Nga tuhinga me nga tauira mo te whakamahi i nga waahanga whakatere whakauru a Bootstrap.
Base nav
Ko te whakaterenga e waatea ana i Bootstrap e tiritiri ana i nga tohu me nga momo ahua, mai i te .nav
karaehe turanga ki nga whenua kaha me te haua. Hurihia nga karaehe whakarerekē kia huri i waenga i ia kāhua.
Ko te waahanga turanga .nav
he mea hanga ki te flexbox me te whakarato i te turanga kaha mo te hanga i nga momo waahanga whakatere katoa. Kei roto ko etahi o nga momo taapiri (mo te mahi me nga raarangi), etahi papaa hono mo nga waahi nui ake, me te hanga whakangao haua.
Ko te waahanga turanga .nav
kaore he .active
ahua. Kei roto i nga tauira e whai ake nei ko te karaehe, ko te nuinga hei whakaatu kaore tenei karaehe e whakaohooho i tetahi momo hanga motuhake.
Hei kawe i te ahua kaha ki nga hangarau awhina, whakamahia te aria-current
huanga — ma te whakamahi i te page
uara mo te wharangi o naianei, true
mo te taonga o naianei kei roto i te huinga.
<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>
Ka whakamahia nga karaehe puta noa, na reira ka tino ngawari to tohu. Whakamahia <ul>
nga mea penei i runga ake nei, <ol>
mena he mea nui te raupapa o au mea, ka huri ranei i a koe ake me tetahi <nav>
huānga. Na te mea ko nga .nav
whakamahinga display: flex
, he rite te ahua o nga hononga nav ki nga taonga nav, engari kaore he tohu taapiri.
<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>
Ngā kāhua e wātea ana
Hurihia te ahua o .nav
te waahanga s me nga whakarereke me nga taputapu. Whakaranuhia me te whakarite i nga mea e hiahiatia ana, ka hanga ranei i a koe ake.
Tirohanga whakapae
Hurihia te tirohanga whakapae o to nav me nga taputapu flexbox . Ma te taunoa, he tiaaro maui nga navs, engari ka taea e koe te huri ki te tika ki waenganui, matau ranei.
Pokapū ki .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>
Tirohanga-matau ki .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>
Poutū
Tāpaehia tō whakatere mā te huri i te ahunga tūemi ngāwari me te .flex-column
whaipainga. Me tāpae ki runga i etahi tauranga tirohanga engari kaua ki etahi atu? Whakamahia nga putanga urupare (hei tauira, .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>
I nga wa katoa, ka taea te whakatere poutū me te kore <ul>
s, rawa.
<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>
Ripa
Ka tango i te nav taketake mai i runga ka taapirihia te .nav-tabs
akomanga ki te whakaputa i tetahi atanga ripa. Whakamahia hei hanga rohe ripanga me ta maatau ripa JavaScript mono .
<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>
Nga pire
Tangohia taua HTML ano, engari whakamahia .nav-pills
:
<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>
Whakakiia ka whakatika
Whakahauhia .nav
o ihirangi ki te whakawhānui i te whanui e waatea ana tetahi o nga akomanga whakarereke e rua. Ki te whakaki i nga waahi katoa e waatea ana ki o .nav-item
s, whakamahia .nav-fill
. Kia mahara kei te noho nga mokowā whakapae katoa, engari ehara i te mea he rite te whanui o nga mea nav katoa.
<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>
I te wa e whakamahi ana koe i te <nav>
whakaterenga-a-ringa, ka taea e koe te whakakore .nav-item
i te mea .nav-link
e hiahiatia ana mo nga <a>
huānga whakaahua.
<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>
Mo nga huānga rite-whanui, whakamahia .nav-justified
. Ko nga mokowā whakapae katoa ka nohoia e nga hononga nav, engari kare i rite ki .nav-fill
runga ake nei, ka rite te whanui o ia mea nav.
<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>
He rite ki te .nav-fill
tauira ma te whakamahi i te <nav>
navigation -based.
<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>
Te mahi me nga taputapu ngawari
Mena ka hiahia koe ki nga rereketanga nav aro, whakaarohia te whakamahi i te raupapa o nga taputapu flexbox . Ahakoa he nui ake nga korero, ko enei taputapu he nui ake nga whakaritenga puta noa i nga waahanga pakaru urupare. I roto i te tauira i raro nei, ka tapaehia to maatau nav ki te waahi pakaru iti rawa, ka urutau ki te whakatakotoranga whakapae e whakakiia ana te whanui e waatea ana mai i te waahi pakaru iti.
<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>
Mo te urunga
Mena kei te whakamahi koe i nga navs ki te whakarato i te pae whakaterenga, me whakauru he role="navigation"
ki te ipu matua tino arorau o te <ul>
, ka takai ranei i tetahi <nav>
huānga huri noa i te whakaterenga katoa. Kaua e taapirihia te mahi ki a <ul>
ia ano, na te mea ka kore e panuitia hei raarangi tuuturu ma nga hangarau awhina.
Kia mahara ko nga pae whakaterenga, ahakoa kua tohua hei ripa me te .nav-tabs
karaehe, kaua e hoatu role="tablist"
, huanga role="tab"
ranei . role="tabpanel"
He tika noa enei mo nga atanga ripa hihiri, pera i te korero i roto i nga Tikanga Kaituhi WAI ARIA . Tirohia te whanonga JavaScript mo nga atanga ripa hihiri i tenei waahanga hei tauira. Kaore aria-current
e tika ana te huanga i runga i nga atanga ripa hihiri mai i ta maatau JavaScript e whakahaere te ahua kua tohua ma te taapiri aria-selected="true"
i te ripa hohe.
Te whakamahi takaiho
Taapirihia nga tahua takaiho me te HTML iti me te mono JavaScript takaiho .
Ripa whai takaiho
<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>
Nga pire me nga takaiho
<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
Taurangi
$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;
Te whanonga JavaScript
Whakamahia te mono JavaScript ripa—whakauruhia takitahi, ma te bootstrap.js
konae kua whakahiato—ki te toro atu i a maatau ripa whakatere me nga pire hei hanga i nga panui ripanga o nga ihirangi rohe.
Ko nga atanga ripa hihiko, pera i te whakaahuatanga i roto i nga Tikanga Kaituhi WAI ARIA , me role="tablist"
, role="tab"
, role="tabpanel"
, me etahi atu aria-
huanga hei kawe i o raatau hanganga, mahi me te ahuatanga o naianei ki nga kaiwhakamahi o nga hangarau awhina (penei i nga panui mata). Hei mahi pai rawa atu, ka tūtohu matou ki te whakamahi i <button>
nga huānga mo nga ripa, i te mea he mana enei ka puta he huringa hihiri, kaua ki nga hononga e whakatere ana ki tetahi wharangi hou, waahi ranei.
Kia mahara ko nga atanga ripa hihiri kia kaua e uru ki roto nga tahua takaiho, na te mea ka puta nga take mo te whakamahi me te urunga. Mai i te tirohanga whaihua, ko te mea kaore i te kitea tonutia te huānga keu o te ripa e whakaatuhia ana i tenei wa (i te mea kei roto i te tahua takaiho kati) ka raru. Mai i te tirohanga whakaaheitanga, karekau he huarahi tika ki te mapi i tenei momo hanga ki tetahi tauira WAI ARIA paerewa, ko te tikanga kaore e taea te maarama ki nga kaiwhakamahi o nga hangarau awhina.
Koinei etahi o nga ihirangi whai waahi o te ripa Home e hono ana. Ma te panui i tetahi atu ripa ka takahuri te tirohanga o tenei mo te waa e whai ake nei. Ko te ripa JavaScript ka huri i nga karaehe hei whakahaere i te tirohanga me te ahua o te ihirangi. Ka taea e koe te whakamahi me nga ripa, pire, me etahi atu .nav
whakaterenga -powered.
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>
Hei awhina i to hiahia, ka mahi tenei me te tohu-a-ringa <ul>
, penei i runga ake nei, me etahi tohu "hurihia taau ake" ranei. Kia mahara mena kei te whakamahi koe i te <nav>
, kaua e taapiri role="tablist"
tika atu, na te mea ka takahia te mahi taketake o te huānga hei tohu whenua whakatere. Engari, huri ki tetahi atu huānga (i te tauira i raro nei, he ngawari <div>
) ka takai i te <nav>
taha.
<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>
Ka mahi ano te mono ripa me nga pire.
Koinei etahi o nga ihirangi whai waahi o te ripa Home e hono ana. Ma te panui i tetahi atu ripa ka takahuri te tirohanga o tenei mo te waa e whai ake nei. Ko te ripa JavaScript ka huri i nga karaehe hei whakahaere i te tirohanga me te ahua o te ihirangi. Ka taea e koe te whakamahi me nga ripa, pire, me etahi atu .nav
whakaterenga -powered.
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>
Me nga pire poutū.
Koinei etahi o nga ihirangi whai waahi o te ripa Home e hono ana. Ma te panui i tetahi atu ripa ka takahuri te tirohanga o tenei mo te waa e whai ake nei. Ko te ripa JavaScript ka huri i nga karaehe hei whakahaere i te tirohanga me te ahua o te ihirangi. Ka taea e koe te whakamahi me nga ripa, pire, me etahi atu .nav
whakaterenga -powered.
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>
Te whakamahi i nga huanga raraunga
Ka taea e koe te whakahohe i te whakatere ripa, pire ranei me te kore e tuhi i tetahi JavaScript ma te tohu noa , ki runga data-bs-toggle="tab"
ranei data-bs-toggle="pill"
i tetahi huānga. Whakamahia enei huanga raraunga ki runga .nav-tabs
ranei .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>
Ma te JavaScript
Whakahohehia nga ripa ripa ma te JavaScript (me whakahohe takitahi ia ripa):
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()
})
})
Ka taea e koe te whakahohe i nga ripa takitahi i roto i nga huarahi maha:
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
Painga muhani
Kia memeha haere nga ripa, taapiri atu .fade
ki ia .tab-pane
. Ko te pihanga ripa tuatahi me .show
whakaatu te ihirangi tuatahi.
<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>
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
constructor
Ka whakahohe i te huānga ripa me te ipu ihirangi. Me whai i te Ripa he data-bs-target
, he hononga ranei, he href
huanga, e aro ana ki tetahi node ipu i te 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>
whakaatu
Ka kowhiri i te ripa kua homai ka whakaatu i tana pihanga hono. Ko etahi atu ripa i tohua i mua ka kore i tohua, ka hunahia te pihanga hono. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te pihanga ripa (arā i mua i te shown.bs.tab
puta o te takahanga).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
tuku
Ka whakakore i te ripa o te huānga.
getInstance
Tikanga pateko e taea ai e koe te tiki i te tauira ripa e hono ana ki tetahi huānga DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Tikanga pateko e taea ai e koe te tiki i te tauira ripa e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Nga huihuinga
Ina whakaatu ana i te ripa hou, ka pupuhi nga takahanga i roto i te raupapa e whai ake nei:
hide.bs.tab
(i runga i te ripa hohe onāianei)show.bs.tab
(i runga i te ripa hei whakaatu)hidden.bs.tab
(i runga i te ripa hohe o mua, he rite ki tehide.bs.tab
kaupapa)shown.bs.tab
(i runga i te ripa katahi ano ka hohe ka whakaatuhia, he rite tonu ki tera mo teshow.bs.tab
takahanga)
Mena karekau he ripa i hohe, karekau te hide.bs.tab
me hidden.bs.tab
nga takahanga e pana.
Momo takahanga | Whakaahuatanga |
---|---|
show.bs.tab |
Ka pupuhi tenei takahanga ki te whakaaturanga ripa, engari i mua i te whakaaturanga o te ripa hou. Whakamahia event.target me event.relatedTarget te aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana). |
shown.bs.tab |
Ka ahi tenei takahanga ki te whakaaturanga ripa i muri i te whakaaturanga ripa. Whakamahia event.target me event.relatedTarget te aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana). |
hide.bs.tab |
Ka puhipuhi tenei takahanga ina whakaatuhia he ripa hou (na reira me huna te ripa hohe o mua). Whakamahia event.target me event.relatedTarget te whakawhāiti i te ripa hohe onāianei me te ripa hou-hohe-hohe, ia. |
hidden.bs.tab |
Ka ahi tenei takahanga i muri i te whakaaturanga ripa hou (na reira ka huna te ripa hohe o mua). Whakamahia event.target me event.relatedTarget te aro ki te ripa hohe o mua me te ripa hohe hou. |
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
})