Navs me nga ripa

Nga tuhinga me nga tauira mo te whakamahi i nga waahanga whakatere whakauru a Bootstrap.

I tenei wharangi

Nav turanga

Ko te whakaterenga e waatea ana i Bootstrap e tiritiri ana i nga tohu me nga momo ahua, mai i te .navkaraehe turanga ki nga whenua kaha me te haua. Hurihia nga karaehe whakarerekē kia huri i waenga i ia kāhua.

Ko te waahanga turanga .navhe 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 whakaahua tangata haua.

Ko te waahanga turanga .navkaore he ahua o te .activeahua. 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-currenthuanga — te whakamahi i te pageuara mo te wharangi o naianei, truemo te taonga o naianei kei roto i te huinga.

html

<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>

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 .navwhakamahinga display: flex, he rite te ahua o nga hononga nav ki nga taonga nav, engari kaore he tohu taapiri.

html

<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>

Ngā kāhua e wātea ana

Hurihia te ahua o .navte 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:

html

<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>

Tirohanga-matau ki .justify-content-end:

html

<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>

Poutū

Tāpaehia tō whakatere mā te huri i te ahunga tūemi ngāwari me te .flex-columnwhaipainga. Me tāpae ki runga i etahi tauranga tirohanga engari kaua ki etahi atu? Whakamahia nga putanga urupare (hei tauira, .flex-sm-column).

html

<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>

I nga wa katoa, ka taea te whakatere poutū me te kore <ul>s, rawa.

html

<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>

Ripa

Ka tango i te nav taketake mai i runga ka taapirihia te .nav-tabsakomanga ki te whakaputa i tetahi atanga ripa. Whakamahia hei hanga rohe ripanga me ta maatau ripa JavaScript mono .

html

<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>

Nga pire

Tangohia taua HTML ano, engari whakamahia .nav-pills:

html

<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>

Whakakiia ka whakatika

Whakahauhia .navo 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-items, 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.

html

<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>

I te wa e whakamahi ana koe i te <nav>whakaterenga-a-ringa, ka taea e koe te whakakore .nav-itemi te mea .nav-linke hiahiatia ana mo nga <a>huānga whakaahua.

html

<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>

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-fillrunga ake nei, ka rite te whanui o ia mea nav.

html

<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>

He rite ki te .nav-filltauira ma te whakamahi i te <nav>navigation -based.

html

<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>

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.

html

<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>

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-tabskaraehe, kaua e hoatu role="tablist", huanga role="tab"ranei . role="tabpanel"He tika noa enei mo nga atanga ripa hihiri, pera i whakaahuatia i roto i te tauira ripa Aratohu Mahinga Kaituhi ARIA . Tirohia te whanonga JavaScript mo nga atanga ripa hihiri i tenei waahanga hei tauira. Kaore aria-currente 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

html

<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>

Nga pire me nga takaiho

html

<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>

CSS

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o nga huringa CSS e tipu haere ana a Bootstrap, ka whakamahia e nga navs nga taurangi CSS rohe i runga i te .nav, .nav-tabs, me .nav-pillste whakapai ake i nga whakaritenga o te waa. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

I runga i te .navkaraehe turanga:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

I runga i te .nav-tabsakomanga whakarereke:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

I runga i te .nav-pillsakomanga whakarereke:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Taurangi Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.jskonae kua whakahiato—ki te toro atu i a maatau ripa whakatere me nga pire hei hanga i nga panui ripanga o nga ihirangi rohe.

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 .navwhakaterenga -powered.

Koinei etahi o nga ihirangi whai waahi o te ripa Profile 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 .navwhakaterenga -powered.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Ka mahi ano te mono ripa me nga pire.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Me nga pire poutū. Ko te tikanga, mo nga ripa poutū, me tapiri ano koe aria-orientation="vertical"ki te ipu rarangi ripa.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Te urunga

Atanga ripa hihiko, pera i whakaahuatia i roto i te ARIA Authoring Practices Guide tabs patterns , 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 kaipanui 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.

I runga i te tauira ARIA Authoring Practices, ko te ripa hohe i tenei wa ka whiwhi arotahi papapātuhi. Ina arawhitia te mono JavaScript, ka tau ki tabindex="-1"runga i nga mana ripa hohekore katoa. I te wa e arotahi ana te ripa e hohe ana i tenei wa, ka whakahohehia e nga kii pehu te ripa o mua/panuku, me te mono e huri ana i te huri haeretabindex . Heoi, kia mahara kaore te mono JavaScript e wehewehe i nga rarangi ripa whakapae me te poutū ina tae mai ki nga taunekeneke matua pehu: ahakoa te ahua o te rarangi ripa, ka haere te pehu whakarunga me te maui ki te ripa o mua, ka haere te pehu ki raro me te matau ki te ripa e whai ake nei.

I te nuinga o te waa, hei whakaahuru i te whakaterenga papapātuhi, e taunaki ana kia whakakorikorihia nga panui ripa, mena ko te huānga tuatahi kei roto nga mea whai kiko kei roto i te panui ripa kua tino aro. Kare te mono JavaScript e ngana ki te hapai i tenei waahanga—mehemea e tika ana, me ata whakakorikori o panui ripa ma te taapiri tabindex="0"i to tohu.

Ko te mono JavaScript ripa e kore e tautoko i nga atanga ripanga kei roto nga tahua takaiho, na te mea ko enei take e rua 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.

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-tabsranei .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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Ma te JavaScript

Whakahohehia nga ripa ripa ma te JavaScript (me whakahohe takitahi ia ripa):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Ka taea e koe te whakahohe i nga ripa takitahi i roto i nga huarahi maha:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Painga muhani

Kia memeha haere nga ripa, taapiri atu .fadeki ia .tab-pane. Ko te pihanga ripa tuatahi me .showwhakaatu te ihirangi tuatahi.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

Ka whakahohe i to ihirangi hei huānga ripa.

Ka taea e koe te hanga tauira ripa me te kaihanga, hei tauira:

const bsTab = new bootstrap.Tab('#myTab')

Tikanga	Whakaahuatanga
`dispose`	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, ka taea e koe te whakamahi penei: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Aratuka pateko hei whakahoki i tetahi tauira ripa e hono ana ki tetahi huānga DOM, ka hangaia he mea hou mena kaore i arawhiti. Ka taea e koe te whakamahi penei `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	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).

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 te hide.bs.tabkaupapa)
shown.bs.tab(i runga i te ripa katahi ano ka hohe ka whakaatuhia, he rite tonu ki tera mo te show.bs.tabtakahanga)

Mena karekau he ripa i hohe, karekau te hide.bs.tabme hidden.bs.tabnga takahanga e pana.

Momo takahanga	Whakaahuatanga
`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.
`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).

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})