Navs agus tabaichean

Sgrìobhainnean agus eisimpleirean airson mar a chleachdas tu co-phàirtean seòlaidh Bootstrap.

Air an duilleig seo

Bun nav

Bidh seòladh a tha ri fhaighinn ann am Bootstrap a’ roinn comharran coitcheann agus stoidhlichean, bhon bhun- .navchlas gu na stàitean gnìomhach agus ciorramach. Dèan iomlaid air clasaichean mion-atharrachaidh gus gluasad eadar gach stoidhle.

Tha am pàirt bunaiteach .navair a thogail le flexbox agus a’ toirt bunait làidir airson a h-uile seòrsa de cho-phàirtean seòlaidh a thogail. Tha e a’ toirt a-steach cuid de rudan a tha a’ dol thairis air stoidhle (airson obrachadh le liostaichean), cuid de phlugadh ceangail airson raointean a tha air am bualadh nas motha, agus stoidhle bunaiteach ciorramach.

.navChan eil am pàirt bunaiteach a’ toirt a-steach .activestaid sam bith. Tha na h-eisimpleirean a leanas a’ toirt a-steach a’ chlas, gu h-àraidh airson sealltainn nach eil an clas sònraichte seo a’ brosnachadh stoidhle sònraichte sam bith.

Gus an staid ghnìomhach a thoirt gu teicneòlasan cuideachail, cleachd am aria-currentfeart - a’ cleachdadh an pageluach airson duilleag gnàthach, no trueairson an rud gnàthach ann an seata.

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>

Bithear a’ cleachdadh chlasaichean air feadh, agus mar sin faodaidh do chomharradh a bhith air leth sùbailte. Cleachd <ul>na rudan gu h-àrd, <ol>ma tha òrdugh nan nithean agad cudromach, no rolaich do chuid fhèin le <nav>eileamaid. Leis gu bheil na .navcleachdaidhean display: flex, bidh na ceanglaichean nav gan giùlan fhèin mar a bhiodh nithean nav, ach às aonais a’ chomharra a bharrachd.

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>

Stoidhlichean rim faighinn

Atharraich stoidhle .navco-phàirt s le mion-atharraichean agus goireasan. Meudaich agus maids mar a dh ’fheumar, no tog do chuid fhèin.

Co-thaobhadh còmhnard

Atharraich co-thaobhadh còmhnard do nav le goireasan flexbox . Gu gnàthach, tha navs air an co-thaobhadh ris an taobh chlì, ach is urrainn dhut gu furasta an atharrachadh gu meadhan no co-thaobhadh deas.

Air a chuimseachadh le .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>

Co-thaobhadh ceart le .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>

Inghearach

Stack do sheòladh le bhith ag atharrachadh stiùireadh an nì flex leis a’ .flex-columnghoireas. Am feum thu an cruachadh air cuid de phuirt-seallaidh ach chan eil feadhainn eile? Cleachd na dreachan freagairteach (me, .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>

Mar as àbhaist, tha seòladh dìreach comasach às aonais <ul>s, cuideachd.

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>

Tabaichean

A’ gabhail an nòs bunaiteach bho shuas agus a’ cur ris a’ .nav-tabschlas gus eadar-aghaidh tabaichte a chruthachadh. Cleachd iad gus roinnean tabable a chruthachadh leis a ’ plugan tab JavaScript againn .

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>

Pills

Gabh an aon HTML sin, ach cleachd .nav-pillsan àite sin:

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>

Lìon agus fìreanachadh

Thoir .navair na tha anns an t-susbaint agad an leud iomlan a leudachadh aon de dhà chlas mion-atharrachaidh. Gus a h-uile àite a tha ri fhaighinn a lìonadh leis na .nav-items agad, cleachd .nav-fill. Mothaich gu bheil a h-uile àite còmhnard air a chleachdadh, ach chan eil an aon leud aig a h-uile nì seòlaidh.

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>

Nuair a bhios tu a’ cleachdadh <nav>seòladh stèidhichte, faodaidh tu fàgail a-mach gu sàbhailte .nav-itemmar a tha riatanach airson eileamaidean .nav-linkstoidhle .<a>

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>

Airson eileamaidean de leud co-ionann, cleachd .nav-justified. Bidh a h-uile àite còmhnard air a ghabhail a-steach le ceanglaichean nav, ach eu-coltach ris na tha gu h- .nav-fillàrd, bidh gach nì seòlaidh den aon leud.

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>

Coltach ris an .nav-filleisimpleir a 'cleachdadh <nav>seòladh stèidhichte.

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>

Ag obair le flex utilities

Ma tha feum agad air atharrachaidhean freagairteach nav, smaoinich air a bhith a’ cleachdadh sreath de ghoireasan flexbox . Fhad ‘s a tha iad nas gnìomhaiche, tha na goireasan sin a’ tabhann barrachd gnàthachaidh thairis air puingean brisidh freagairteach. Anns an eisimpleir gu h-ìosal, bidh an inneal-seòlaidh againn air a chruachadh air a’ phuing-bhriseadh as ìsle, agus an uairsin atharraichidh e gu cruth còmhnard a lìonas an leud a tha ri fhaighinn a’ tòiseachadh bhon àite brisidh bheag.

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>

A thaobh ruigsinneachd

Ma tha thu a’ cleachdadh navs gus bàr seòlaidh a sholarachadh, bi cinnteach gun cuir thu ris role="navigation"a’ ghobhar phàrant as loidsigeach den <ul>, no paisg <nav>eileamaid timcheall an t-seòlaidh gu lèir. Na cuir an dreuchd ris <ul>fhèin, oir chuireadh seo stad air bho bhith air ainmeachadh mar fhìor liosta le teicneòlasan taice.

Thoir an aire nach bu chòir , no buadhan a thoirt do bhàraichean seòlaidh, eadhon ged a tha iad air an ainmeachadh mar tabaichean leis a’ .nav-tabschlas . Chan eil iad sin iomchaidh ach airson eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA . Faic giùlan JavaScript airson eadar-aghaidh tabbed fiùghantach san roinn seo airson eisimpleir. Chan eil am feart riatanach air eadar-aghaidh tabbed fiùghantach leis gu bheil an JavaScript againn a’ làimhseachadh na stàite taghte le bhith a’ cur ris an taba gnìomhach.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

A 'cleachdadh dropdowns

Cuir clàran-bìdh sìos le beagan HTML a bharrachd agus am plugan tuiteam-sìos JavaScript .

Tabaichean le dropdowns

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>

Pills le dropdowns

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

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha navs a-nis a’ cleachdadh caochladairean CSS ionadail air .nav, .nav-tabs, agus .nav-pillsairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

Air a ' .navchlas bunaiteach:

  --#{$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};

Anns a ' .nav-tabschlas mion-atharrachaidh:

  --#{$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};

Anns a ' .nav-pillschlas mion-atharrachaidh:

  --#{$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};

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

Giùlan JavaScript

Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.jsfhaidhle cruinnichte - gus na tabaichean seòlaidh agus na pills againn a leudachadh gus panalan tabable de shusbaint ionadail a chruthachadh.

Seo cuid de shusbaint neach-àite an t-susbaint a tha co -cheangailte ris an taba Dachaigh . Ma bhriogas tu air taba eile togaidh tu faicsinneachd an tè seo airson an ath fhear. Bidh an tab JavaScript ag atharrachadh chlasaichean gus smachd a chumail air faicsinneachd susbaint agus stoidhle. Faodaidh tu a chleachdadh le tabaichean, pills, agus .navseòladh le cumhachd sam bith eile.

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.

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>

Gus cuideachadh le bhith a’ freagairt air na feumalachdan agad, bidh seo ag obair le <ul>comharradh stèidhichte, mar a chithear gu h-àrd, no le comharradh neo-riaghailteach “rol do chuid fhèin”. Thoir an aire ma tha thu a’ cleachdadh <nav>, cha bu chòir dhut cur ris role="tablist"gu dìreach, oir bhiodh seo a’ dol thairis air àite dùthchasach an eileamaid mar chomharra-tìre seòlaidh. An àite sin, gluais gu eileamaid eile (san eisimpleir gu h-ìosal, sìmplidh <div>) agus cuir <nav>timcheall air.

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>

Bidh am plugan tabaichean cuideachd ag obair le pills.

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>

Agus le pills dìreach. Mas fheàrr, airson tabaichean dìreach, bu chòir dhut cuideachd a chur ris aria-orientation="vertical"a’ ghobhar liosta tab.

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>

Ruigsinneachd

Feumaidh eadar-aghaidh tabbed fiùghantach, mar a tha air a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA , role="tablist", role="tab", role="tabpanel", agus aria-buadhan a bharrachd gus an structar, an comas-gnìomh agus an staid làithreach a thoirt do luchd-cleachdaidh theicneòlasan taice (leithid leughadairean sgrion). Mar chleachdadh as fheàrr, tha sinn a’ moladh <button>eileamaidean a chleachdadh airson nan tabaichean, oir is e smachdan a tha seo a bhrosnaicheas atharrachadh fiùghantach, seach ceanglaichean a bhios a’ seòladh gu duilleag no àite ùr.

A rèir pàtran Cleachdaidhean Ùghdarrachaidh ARIA, chan fhaigh ach an taba gnìomhach an-dràsta fòcas meur-chlàr. Nuair a thèid am plugan JavaScript a thòiseachadh, suidhichidh e tabindex="-1"air a h-uile smachd taba neo-ghnìomhach. Aon uair ‘s gu bheil fòcas air an taba a tha gnìomhach an-dràsta, cuiridh na h-iuchraichean cùrsair an taba roimhe / an ath rud an gnìomh, leis a’ plugan ag atharrachadh an gluasad a rèirtabindex sin. Ach, thoir an aire nach eil am plugan JavaScript a’ dèanamh eadar-dhealachadh eadar liostaichean tabaichean còmhnard is inghearach nuair a thig e gu prìomh eadar-obrachaidhean cursair: ge bith dè an taobh a tha an liosta taba, bidh an cursair gu h-àrd is air an taobh chlì a’ dol chun taba roimhe, agus sìos is sìos an cursair deas a’ dol gu an ath tab.

San fharsaingeachd, gus seòladh meur-chlàr a dhèanamh comasach, thathas a’ moladh na pannalan taba fhèin a dhèanamh fòcasach cuideachd, mura h-eil fòcas air a’ chiad eileamaid anns a bheil susbaint brìoghmhor taobh a-staigh pannal nan tabaichean mar-thà. Cha bhith am plugan JavaScript a’ feuchainn ris an taobh seo a làimhseachadh - far a bheil sin iomchaidh, feumaidh tu na pannalan taba agad a dhèanamh follaiseach le bhith a’ cur tabindex="0"do chomharradh a-steach.

Chan eil am plugan tab JavaScript a’ toirt taic do eadar-aghaidh tabaichean anns a bheil clàir-thaice, leis gu bheil iad sin ag adhbhrachadh cùisean cleachdaidh agus ruigsinneachd. Bho shealladh cleachdaidh, faodaidh an fhìrinn nach eil eileamaid brosnachaidh an taba a tha air a thaisbeanadh an-dràsta ri fhaicinn sa bhad (leis gu bheil e taobh a-staigh a ’chlàr tuiteam-sìos dùinte) troimh-chèile adhbhrachadh. Bho thaobh ruigsinneachd, chan eil dòigh reusanta ann an-dràsta an seòrsa togail seo a mhapadh gu pàtran àbhaisteach WAI ARIA, a’ ciallachadh nach urrainn dha a bhith furasta a thuigsinn do luchd-cleachdaidh theicneòlasan taice.

A’ cleachdadh feartan dàta

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-bs-toggle="tab"no data-bs-toggle="pill"air eileamaid. Cleachd na buadhan dàta seo air .nav-tabsno .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>

Air sgàth javascript

Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):

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

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

Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:

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

A 'bhuaidh a dh' fhalbh

Gus toirt air tabaichean a dhol a-steach, cuir .faderis gach .tab-pane. Feumaidh a’ chiad phana taba cuideachd .showan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

Cuir an susbaint agad an gnìomh mar eileamaid tab.

Faodaidh tu eisimpleir tab a chruthachadh leis an neach-togail, mar eisimpleir:

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

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios tab eileamaid.
`getInstance`	Dòigh statach a leigeas leat an eisimpleir tab fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thilleas eisimpleir taba co-cheangailte ri eileamaid DOM no cruthaich fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Tagh an taba a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an `shown.bs.tab`tachartas).

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

hide.bs.tab(air an taba gnìomhach làithreach)
show.bs.tab(air an taba a tha ri fhaicinn)
hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

Seòrsa tachartas	Tuairisgeul
`hide.bs.tab`	Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
`hidden.bs.tab`	Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.
`show.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
`shown.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.

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