Navs og flipar

Skjöl og dæmi um hvernig á að nota meðfylgjandi leiðsöguhluta Bootstrap.

Á þessari síðu

Nav

Leiðsögn í boði í Bootstrap deilir almennri merkingu og stílum, frá .navgrunnflokki til virks og óvirkrar stöðu. Skiptu um breytingaflokka til að skipta á milli hvers stíls.

Grunnhlutinn .naver byggður með flexbox og gefur sterkan grunn til að byggja allar gerðir af leiðsöguíhlutum. Það felur í sér nokkrar útfærslur á stíl (til að vinna með lista), einhverja hlekkjafyllingu fyrir stærri höggsvæði og undirstöðu fatlaða stíl.

Grunnþátturinn .navinniheldur ekki neitt .activeástand. Eftirfarandi dæmi innihalda bekkinn, aðallega til að sýna fram á að þessi tiltekni flokkur kallar ekki fram neina sérstaka stíl.

Til að miðla virku ástandi til hjálpartækni, notaðu aria-currenteigindina — notaðu pagegildið fyrir núverandi síðu eða truefyrir núverandi hlut í setti.

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>

Flokkar eru notaðir í gegn, svo álagning þín getur verið mjög sveigjanleg. Notaðu <ul>s eins og hér að ofan, <ol>ef röðin á hlutunum þínum er mikilvæg, eða rúllaðu þínum eigin með <nav>frumefni. Vegna þess að .navnav display: flex-tenglar hegða sér eins og nav-hlutir myndu hegða sér, en án aukamerkingarinnar.

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>

Stíll í boði

Breyttu stíl .navs íhluta með breytingum og tólum. Blandaðu saman eftir þörfum eða byggðu þitt eigið.

Lárétt jöfnun

Breyttu láréttri röðun nav þinnar með flexbox tólum . Sjálfgefið er að siglingar séu vinstrijafnaðir, en þú getur auðveldlega breytt þeim í miðju eða hægri stillt.

Miðað með .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>

Hægrijafnað með .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>

Lóðrétt

Staflaðu leiðsögninni þinni með því að breyta stefnu sveigjanlegra hluta með .flex-columntólinu. Þarftu að stafla þeim á sumum útsýnisgáttum en ekki öðrum? Notaðu móttækilegu útgáfurnar (td .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>

Eins og alltaf er lóðrétt sigling líka möguleg án <ul>s.

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>

Flipar

Tekur grunnflettingu að ofan og bætir við .nav-tabsbekknum til að búa til flipaviðmót. Notaðu þau til að búa til svæði með flipa með JavaScript viðbótinni okkar .

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>

Pilla

Taktu sama HTML, en notaðu .nav-pillsí staðinn:

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>

Fylltu út og rökstuddu

Þvingaðu .navinnihald þitt til að lengja alla tiltæka breidd einn af tveimur breytingaflokkum. Til að fylla hlutfallslega allt tiltækt pláss með .nav-itemsímum þínum skaltu nota .nav-fill. Taktu eftir því að allt lárétt pláss er upptekið, en ekki eru allir nav atriði með sömu breidd.

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>

Þegar þú notar <nav>leiðsögn sem byggir á, geturðu örugglega sleppt .nav-itemþví þar sem aðeins .nav-linker krafist fyrir stílþætti <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>

Fyrir jafnbreiðar þætti, notaðu .nav-justified. Allt lárétt pláss verður upptekið af nav-tenglum, en ólíkt .nav-fillofangreindu, mun hver siglingahlutur hafa sömu breidd.

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>

Svipað og .nav-filldæmið með því að nota <nav>-undirstaða flakk.

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>

Vinna með flex tólum

Ef þú þarft móttækileg nav afbrigði skaltu íhuga að nota röð af flexbox tólum . Þótt þau séu orðlaus bjóða þessi tól meiri aðlögun á móttækilegum brotastöðum. Í dæminu hér að neðan verður sjónum okkar staflað á lægsta brotpunkt, síðan aðlagast láréttu skipulagi sem fyllir tiltæka breidd frá og með litla brotpunktinum.

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>

Varðandi aðgengi

Ef þú ert að nota stýrikerfi til að útvega leiðsögustiku, vertu viss um að bæta við a role="navigation"við rökréttasta yfirgeymi <ul>, eða vefja <nav>einingu um alla leiðsögnina. Ekki bæta hlutverkinu við <ul>sjálft sig, þar sem það myndi koma í veg fyrir að það væri tilkynnt sem raunverulegur listi af hjálpartækjum.

Athugaðu að leiðarstikur, jafnvel þótt þær séu sjónrænt stílaðar sem flipar með .nav-tabsbekknum, ætti ekki að gefa role="tablist", role="tab"eða role="tabpanel"eiginleika. Þetta eru aðeins viðeigandi fyrir kvik flipaviðmót, eins og lýst er í ARIA Authoring Practices Guide flipamynstri . Sjá JavaScript hegðun fyrir kvik flipaviðmót í þessum hluta til að fá dæmi. Eigindin aria-currenter ekki nauðsynleg á kvikum flipaviðmótum þar sem JavaScript okkar sér um valið ástand með því að bæta aria-selected="true"við virka flipanum.

Notar fellilista

Bættu við fellivalmyndum með smá auka HTML og fellilistanum JavaScript viðbótinni .

Flipar með fellilista

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>

Pilla með fellilista

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

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, nota sjófarar nú staðbundnar CSS breytur á .nav, .nav-tabs, og .nav-pillstil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

Á .navgrunnflokknum:

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

Á .nav-tabsbreytingaflokknum:

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

Á .nav-pillsbreytingaflokknum:

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

Sass breytur

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

JavaScript hegðun

Notaðu JavaScript viðbótina fyrir flipann - láttu það fylgja með fyrir sig eða í gegnum samsettu bootstrap.jsskrána - til að stækka leiðsagnarflipana okkar og pillur til að búa til töflurúður með staðbundnu efni.

Þetta er staðgengilsefni sem tengist efni heimaflipans . Með því að smella á annan flipa breytist sýnileiki þessa fyrir þann næsta. JavaScript flipinn skiptir um flokka til að stjórna sýnileika efnis og stíl. Þú getur notað það með flipa, pillum og öðrum .navleiðsögum.

Þetta er staðgengilsefni sem tengist efni á prófílflipanum . Með því að smella á annan flipa breytist sýnileiki þessa fyrir þann næsta. JavaScript flipinn skiptir um flokka til að stjórna sýnileika efnis og stíl. Þú getur notað það með flipa, pillum og öðrum .navleiðsögum.

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>

Til að hjálpa til við að passa þarfir þínar, virkar þetta með <ul>-undirstaða merkingu, eins og sýnt er hér að ofan, eða með hvaða handahófskenndu "rúllaðu eigin" merkingu. Athugaðu að ef þú ert að nota <nav>ættirðu ekki að bæta role="tablist"beint við það, þar sem þetta myndi hnekkja innfæddu hlutverki frumefnisins sem leiðarmerki. Í staðinn skaltu skipta yfir í annan þátt (í dæminu hér að neðan, einfalt <div>) og vefja <nav>um hann.

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>

Tabs viðbótin virkar líka með pillum.

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>

Og með lóðréttum pillum. Helst, fyrir lóðrétta flipa, ættirðu líka að bæta aria-orientation="vertical"við flipalistansílátið.

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>

Aðgengi

Kvik flipaviðmót, eins og lýst er í ARIA Authoring Practices Guide flipamynstri , krefjast role="tablist", role="tab", role="tabpanel", og viðbótareiginleika aria-til að miðla uppbyggingu þeirra, virkni og núverandi ástandi til notenda hjálpartækni (eins og skjálesara). Sem besta starfsvenjan mælum við með því að nota <button>þætti fyrir flipana, þar sem þetta eru stýringar sem kalla fram kraftmikla breytingu, frekar en tengla sem fara á nýja síðu eða staðsetningu.

Í samræmi við ARIA höfundarvenjur mynstur, fær aðeins virkur flipi lyklaborðsfókus. Þegar JavaScript viðbótin er frumstillt mun hún stilla tabindex="-1"á allar óvirkar flipastýringar. Þegar virki flipinn hefur fókus, virkja bendilyklarnir fyrri/næsta flipa, með viðbótinni breytir víkingunnitabindex í samræmi við það. Athugaðu samt að JavaScript viðbótin gerir ekki greinarmun á láréttum og lóðréttum flipalista þegar kemur að samskiptum bendilykils: óháð stefnu flipalistans fara bæði upp og vinstri bendillinn í fyrri flipa og niður og hægri bendillinn fara í næsta flipa.

Almennt, til að auðvelda flakk á lyklaborðinu, er mælt með því að gera flipaspjöldin sjálf fókusanleg líka, nema fyrsti þátturinn sem inniheldur þýðingarmikið efni inni í flipaspjaldinu sé nú þegar fókusanlegur. JavaScript viðbótin reynir ekki að takast á við þennan þátt - þar sem við á þarftu að gera flipana þína beinlínis fókusanlegan með því að bæta tabindex="0"við merkingunni þinni.

JavaScript tappi flipa styður ekki flipaviðmót sem innihalda fellivalmyndir, þar sem þær valda bæði nothæfis- og aðgengisvandamálum. Frá sjónarhóli notagildis getur sú staðreynd að kveikjuþáttur flipans sem nú er sýndur er ekki sýnilegur strax (þar sem hann er inni í lokuðu fellivalmyndinni) valdið ruglingi. Frá sjónarhóli aðgengis er engin skynsamleg leið í augnablikinu til að kortleggja þessa tegund af byggingu í staðlað WAI ARIA mynstur, sem þýðir að það er ekki auðvelt að gera það skiljanlegt fyrir notendur hjálpartækni.

Notkun gagnaeiginleika

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-bs-toggle="tab"eða data-bs-toggle="pill"á frumefni. Notaðu þessar gagnaeiginleikar á .nav-tabseða .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" 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>

Með JavaScript

Virkjaðu flipa sem hægt er að nota með JavaScript (hvern flipa þarf að virkja fyrir sig):

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

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

Þú getur virkjað einstaka flipa á nokkra vegu:

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

Fade áhrif

Til að láta flipa hverfa inn skaltu bæta .fadevið hvern .tab-pane. Fyrsta fliparúðan verður einnig .showað gera upphafsefnið sýnilegt.

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

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

Virkjar efnið þitt sem flipaþátt.

Þú getur búið til flipatilvik með smiðinum, til dæmis:

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

Aðferð	Lýsing
`dispose`	Eyðir flipa frumefnis.
`getInstance`	Static aðferð sem gerir þér kleift að fá flipatilvikið tengt DOM frumefni, þú getur notað það svona: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statísk aðferð sem skilar flipatilviki sem tengist DOM-einingu eða býr til nýjan ef það var ekki frumstillt. Þú getur notað það svona: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Velur tiltekinn flipa og sýnir tengda gluggann hans. Sérhver annar flipi sem áður var valinn verður óvaldaður og tengdur gluggi hans er falinn. Fer aftur til þess sem hringir áður en flipaglugginn hefur verið sýndur (þ.e. áður en `shown.bs.tab`atburðurinn á sér stað).

Viðburðir

Þegar nýr flipi er sýndur kvikna atburðir í eftirfarandi röð:

hide.bs.tab(á núverandi virka flipa)
show.bs.tab(á flipanum sem á að sýna)
hidden.bs.tab(á fyrri virka flipanum, sá sami og fyrir hide.bs.tabviðburðinn)
shown.bs.tab(á flipanum sem nýlega var sýndur, sá sami og fyrir show.bs.tabviðburðinn)

Ef enginn flipi var þegar virkur, þá verða hide.bs.tabog hidden.bs.tabviðburðir ekki ræstir.

Tegund viðburðar	Lýsing
`hide.bs.tab`	Þessi atburður ræsir þegar nýjan flipa á að sýna (og þar með á að fela fyrri virka flipa). Notaðu `event.target`og `event.relatedTarget`til að miða á núverandi virka flipa og nýja flipa sem bráðum verður virkur, í sömu röð.
`hidden.bs.tab`	Þessi atburður ræsir eftir að nýr flipi er sýndur (og þar með er fyrri virki flipinn falinn). Notaðu `event.target`og `event.relatedTarget`til að miða á fyrri virka flipann og nýja virka flipann, í sömu röð.
`show.bs.tab`	Þessi atburður ræsir á flipasýningu, en áður en nýi flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.
`shown.bs.tab`	Þessi atburður ræsir á flipasýningu eftir að flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.

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