ناوەکان و تابەکان

بەڵگەنامە و نموونە بۆ چۆنیەتی بەکارهێنانی پێکهاتەکانی گەشتکردن کە لەخۆدەگرێت لە Bootstrap.

لەم پەیجەدا

Base nav

گەشتکردن کە لە Bootstrap بەردەستە هاوبەشی مارکاپی گشتی و ستایلەکانە، لە .navپۆلی بنەڕەتییەوە تا باری چالاک و لەکارخراو. پۆلەکانی دەستکاریکەر بگۆڕە بۆ گۆڕینی نێوان هەر ستایلێک.

پێکهاتەی بنەڕەتی .navبە فلیکس بۆکس دروستکراوە و بناغەیەکی بەهێز بۆ دروستکردنی هەموو جۆرە پێکهاتەکانی گەشتیاری دابین دەکات. هەندێک لە سەرپێچی ستایل (بۆ کارکردن لەگەڵ لیستەکان)، هەندێک پادکردنی بەستەر بۆ ناوچەی گەورەتری لێدان، و ستایلکردنی بنەڕەتی لەکارخراو لەخۆدەگرێت.

پێکهاتەی بنەڕەتی هیچ حاڵەتێک .navلەخۆناگرێت . .activeئەم نموونانەی خوارەوە پۆلەکە لەخۆدەگرن، بە شێوەیەکی سەرەکی بۆ ئەوەی نیشان بدەن کە ئەم پۆلە تایبەتە هیچ ستایلێکی تایبەت دەستپێناکات.

بۆ گەیاندنی دۆخی چالاک بۆ تەکنەلۆژیا یارمەتیدەرەکان، aria-currentتایبەتمەندییەکە بەکاربهێنە — بە بەکارهێنانی pageبەها بۆ لاپەڕەی ئێستا، یان trueبۆ بابەتی ئێستا لە کۆمەڵەیەکدا.

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>

پۆلەکان بە درێژایی بەکاردەهێنرێن، بۆیە مارکاپەکەت دەتوانێت سوپەر نەرم و نیان بێت. <ul>s وەک سەرەوە بەکاربهێنە ، <ol>ئەگەر ڕیزبەندی شتەکانت گرنگە، یان خۆت بە <nav>توخمێک ڕۆڵ بکە. چونکە .navبەکارهێنانەکان display: flex, بەستەرەکانی nav هەمان ڕەفتار دەکەن کە بابەتە navەکان دەیکەن، بەڵام بەبێ نیشاندانی زیادە.

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>

ستایلەکانی بەردەست

شێوازی .navپێکهاتەی s بگۆڕە بە دەستکاریکەر و سوودمەندیەکان. بەپێی پێویست تێکەڵاو بکە و یەکسان بکە، یان خۆت دروستی بکە.

ڕێکخستنی ئاسۆیی

ڕێکخستنی ئاسۆیی nav ـەکەت بگۆڕە بە سوودمەندییەکانی flexbox . بە شێوازی پێشوەختە، navs بە چەپ ڕیز دەکرێن، بەڵام دەتوانیت بە ئاسانی بیانگۆڕیت بۆ ناوەڕاست یان ڕاست ڕیزکراو.

سەنتەری لەگەڵ .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>

ڕاست-ڕێکخراوە لەگەڵ .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>

ستونی

گەشتکردنەکەت بە گۆڕینی ئاراستەی بابەتی فلیکس بە .flex-columnسوودمەندیەکە کۆبکەرەوە. پێویستە لەسەر هەندێک ڤیوپۆرت کۆیان بکەیتەوە بەڵام هەندێکی تر نا؟ وەشانی وەڵامدەرەوە بەکاربهێنە (بۆ نموونە، .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>

وەک هەمیشە، گەشتکردنی ڕاست بەبێ <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>

تابەکان

nav ی بنەڕەتی لە سەرەوە وەردەگرێت و .nav-tabsپۆلەکە زیاد دەکات بۆ دروستکردنی ڕووکارێکی تابدار. بەکاریان بهێنە بۆ دروستکردنی ناوچەی تابکراو بە پێوەکراوەکەی جاڤاسکڕێپتی تابەکەمان .

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>

حەبەکان

هەمان HTML وەربگرە، بەڵام .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>

پڕ بکەرەوە و پاساو بۆ بهێنە

ناوەڕۆکی خۆت ناچار بکە .navبۆ درێژکردنەوەی تەواوی پانایی بەردەست یەکێک لە دوو پۆلی دەستکاریکەر. بۆ ئەوەی بە ڕێژەیی هەموو شوێنە بەردەستەکان بە .nav-items ـەکەت پڕ بکەیتەوە، بەکاربهێنە .nav-fill. سەرنج بدەن کە هەموو بۆشایی ئاسۆیی داگیرکراوە، بەڵام هەموو شتێکی nav یەک پانایی نییە.

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>

لە کاتی بەکارهێنانی <nav>گەشتکردنێکی بنەمادار بە -، دەتوانیت بە سەلامەتی جێی بهێڵیت .nav-itemچونکە تەنها بۆ توخمەکانی .nav-linkستایل پێویستە .<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>

بۆ توخمەکانی پانایی یەکسان، بەکاربهێنە .nav-justified. هەموو شوێنە ئاسۆییەکان بە بەستەری nav داگیر دەکرێن، بەڵام بە پێچەوانەی ئەوانەی .nav-fillسەرەوە، هەموو بابەتی 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>

هاوشێوەی .nav-fillنموونەی بەکارهێنانی <nav>-based navigation.

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>

کارکردن لەگەڵ کۆمپانیاکانی فلیکس

ئەگەر پێویستت بە گۆڕانکارییەکانی nav وەڵامدەرەوەیە، بیر لە بەکارهێنانی زنجیرەیەک لە سوودمەندییەکانی flexbox بکەرەوە . لە کاتێکدا کە زیاتر قسەکردنن، ئەم سوودمەندیانە خۆکارکردنی زیاتر پێشکەش دەکەن لە سەرانسەری خاڵە شکاندنەکانی وەڵامدەرەوە. لە نموونەی خوارەوەدا، nav ی ئێمە لەسەر نزمترین خاڵی شکاندن کۆ دەکرێتەوە، پاشان خۆی لەگەڵ شێوازێکی ئاسۆیی دەگونجێنێت کە پانایی بەردەست پڕدەکاتەوە لە خاڵی شکاندنی بچووکەوە دەست پێدەکات.

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>

سەبارەت بە دەستڕاگەیشتن

ئەگەر navs بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>, یان <nav>توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.

تێبینی بکە کە پەتی گەشتکردن، تەنانەت ئەگەر بە شێوەیەکی بینراو وەک تاب لەگەڵ .nav-tabsپۆلەکەدا ستایل کرابێت، نابێت ,role="tablist" یان role="tab"تایبەتمەندی role="tabpanel"بدرێت . ئەمانە تەنها بۆ ڕووکارە تابدارە داینامیکیەکان گونجاون، وەک لە نەخشی تابەکانی ڕێنمایی پراکتیزەکانی نووسینی ARIA باسکراوە . بۆ نموونە سەیری هەڵسوکەوتی جاڤاسکڕێپت بکە بۆ ڕووکارە تابدارە داینامیکیەکان لەم بەشەدا. تایبەتمەندییەکە aria-currentلەسەر ڕووکارە تابدارە داینامیکیەکان پێویست نییە لەبەرئەوەی جاڤاسکڕێپتەکەمان مامەڵە لەگەڵ دۆخی هەڵبژێردراو دەکات بە زیادکردن aria-selected="true"لەسەر تابی چالاک.

بەکارهێنانی درۆپداونەکان

زیادکردنی مینیوی دابەزین بە کەمێک HTML زیادە و پێوەکراوەکانی JavaScript .

تابەکان بە درۆپ داون

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>

حەبەکان بە درۆپداون

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

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندنی Bootstrap، ئێستا navs گۆڕاوە ناوخۆییەکانی CSS لەسەر .nav, .nav-tabs, و .nav-pillsبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە بەکاردەهێنن. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

لەسەر .navپۆلی بنەڕەتی:

  --#{$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-tabsپۆلی دەستکاریکەر:

  --#{$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-pillsپۆلی دەستکاریکەر:

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

گۆڕاوەکانی ساس

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

هەڵسوکەوتی جاڤاسکڕێپت

پێوەکراوەکەی جاڤاسکڕێپتی تاب بەکاربهێنە-بە تاک یان لە ڕێگەی bootstrap.jsپەڕگەی کۆکراوەیەوە لەخۆی بگرە-بۆ درێژکردنەوەی تاب و حەبەکانی گەشتکردنمان بۆ دروستکردنی پەنجەرەی تابکراو لە ناوەڕۆکی ناوخۆیی.

ئەمە هەندێک ناوەڕۆکی شوێنهەڵگرە کە ناوەڕۆکی پەیوەندیدار بە تابی ماڵەوە . کرتەکردن لەسەر تابێکی تر بینینی ئەم تابانە دەگۆڕێت بۆ تابێکی تر. تابی جاڤاسکڕێپت پۆلەکان دەگۆڕێتەوە بۆ کۆنترۆڵکردنی بینین و ستایلکردنی ناوەڕۆک. دەتوانیت لەگەڵ تابەکان، حەبەکان و هەر گەشتێکی تر .navکە -بەهێز بێت بەکاری بهێنیت.

ئەمە هەندێک ناوەڕۆکی شوێنهەڵگرە ناوەڕۆکی پەیوەندیدار بە تابی پڕۆفایلی . کرتەکردن لەسەر تابێکی تر بینینی ئەم تابانە دەگۆڕێت بۆ تابێکی تر. تابی جاڤاسکڕێپت پۆلەکان دەگۆڕێتەوە بۆ کۆنترۆڵکردنی بینین و ستایلکردنی ناوەڕۆک. دەتوانیت لەگەڵ تابەکان، حەبەکان و هەر گەشتێکی تر .navکە -بەهێز بێت بەکاری بهێنیت.

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>

بۆ یارمەتیدان لە گونجاندنی پێداویستییەکانتان، ئەمە بە نیشاندانی بنەمادار بە <ul>-بەند کاردەکات، وەک لە سەرەوە نیشان دراوە، یان لەگەڵ هەر نیشانەیەکی ئارەزوومەندانەی "خۆت ڕۆڵ بکە". تێبینی بکە کە ئەگەر بەکاردەهێنیت <nav>، نابێت role="tablist"ڕاستەوخۆ زیاد بکەیت بۆی، چونکە ئەمە ڕۆڵی سروشتی توخمەکە وەک هێمایەکی گەشتکردن دەسڕێتەوە. لەبری ئەوە، بگۆڕە بۆ توخمێکی بەدیل (لە نموونەی خوارەوەدا، سادە <div>) و بە <nav>دەوریدا بپێچە.

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 لەگەڵ حەبەکان کاردەکات.

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>

وە لەگەڵ حەبی ڕاست. بە شێوەیەکی ئایدیاڵ، بۆ تابە ڕاستەکان، پێویستە زیاد بکەیت aria-orientation="vertical"بۆ کۆنتێنەری لیستی تابەکان.

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>

دەستڕاگەیشتن

ڕووکارە تابدارە داینامیکیەکان، وەک لە نەخشی تابەکانی ڕێنمایی شێوازەکانی نووسینی ARIA باسکراوە ، پێویستیان بە role="tablist", role="tab", role="tabpanel", و تایبەتمەندی زیادە aria-هەیە بۆ ئەوەی پێکهاتە، کارایی و دۆخی ئێستایان بگەیەننە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان (وەک خوێنەری شاشە). وەک باشترین پراکتیزە، پێشنیار دەکەین <button>توخمەکان بۆ تابەکان بەکاربهێنرێت، چونکە ئەمانە کۆنتڕۆڵن کە گۆڕانکارییەکی داینامیکی دەستپێدەکەن، نەک ئەو بەستەرانەی کە دەچنە لاپەڕە یان شوێنێکی نوێ.

بە پێی نەخشی ARIA Authoring Practices، تەنیا تابە چالاکەکەی ئێستا فۆکۆسی کیبۆرد وەردەگرێت. کاتێک پێوەکراوەکەی جاڤاسکڕێپت دەستپێدەکات، tabindex="-1"لەسەر هەموو کۆنتڕۆڵەکانی تابی ناچالاك دادەنرێت. کاتێک کە تابە چالاکەکەی ئێستا فۆکەسی هەبوو، کلیلەکانی ئاماژەدەر تابی پێشوو/دواتر چالاک دەکەن، لەگەڵ پێوەکراوەکە بەپێی ئەو ڕۆڤینگەکەtabindex دەگۆڕێت . بەڵام تێبینی ئەوە بکە کە پێوەکراوەکەی جاڤاسکڕێپت جیاوازی ناکات لە نێوان لیستە ئاسۆیی و ڕاستەکانی تابەکان کاتێک باس لە کارلێکەکانی کلیلی ئاماژەدەر دەکرێت: بەبێ گوێدانە ئاراستەی لیستی تابەکان، هەردوو ئاماژەدەری سەرەوە و چەپ دەچنە سەر تابی پێشوو، و ئاماژەدەری خوارەوە و ڕاست دەچنە سەر تابی داهاتوو.

بەگشتی، بۆ ئاسانکاری لە گەشتکردن بە کیبۆرد، پێشنیار دەکرێت کە پانێڵەکانی تابەکان خۆیان بە هەمان شێوە فۆکەس بکرێت، مەگەر یەکەم توخم کە ناوەڕۆکی ماناداری لە ناو پانێڵی تابەکەدا هەیە پێشتر فۆکەس نەکرێت. پێوەکراوەکەی جاڤاسکڕێپت هەوڵ نادات مامەڵە لەگەڵ ئەم لایەنەدا بکات-لە شوێنێک کە گونجاوە، پێویستە بە ڕوونی پانێڵەکانی تابەکانت بکەیتە فۆکەس بە زیادکردنی tabindex="0"لە مارکاپەکەتدا.

پێوەکراوەکەی جاڤاسکڕێپتی تاب پشتگیری لە ڕووکارە تابدارەکان ناکات کە مینیوی دابەزینیان تێدایە، چونکە ئەمانە دەبنە هۆی هەردوو کێشەی بەکارهێنان و دەستڕاگەیشتن. لە ڕوانگەی بەکارهێنانەوە، ئەو ڕاستییەی کە توخمە دەستپێکەری تابەکەی ئێستا پیشان دراوە دەستبەجێ دیار نییە (وەک چۆن لە ناو مینیوی داخراودایە) دەتوانێت ببێتە هۆی سەرلێشێواوی. لە ڕوانگەی دەستڕاگەیشتنەوە، لە ئێستادا هیچ ڕێگەیەکی عەقڵانی نییە بۆ نەخشەکێشانی ئەم جۆرە بنیاتنانە بۆ نەخشێکی ستانداردی WAI ARIA، بەو مانایەی کە ناتوانرێت بە ئاسانی بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان تێبگەین.

بەکارهێنانی تایبەتمەندیەکانی داتا

دەتوانیت گەشتکردنێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-bs-toggle="tab"یان data-bs-toggle="pill"لەسەر توخمێک. ئەم تایبەتمەندیانەی داتا لەسەر .nav-tabsیان بەکاربهێنە .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>

لە ڕێگەی جاڤاسکڕێپتەوە

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

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

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

دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:

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بۆ هەر یەکەیان .tab-pane. هەروەها دەبێت یەکەم پەنجەرەی تاب دەبێت .showناوەڕۆکی سەرەتایی دیار بکات.

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

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

ناوەڕۆکەکەت وەک توخمێکی تاب چالاک دەکات.

دەتوانیت بە بنیاتنان نموونەی تاب دروست بکەیت، بۆ نموونە:

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

ڕێگا	وەسف
`dispose`	تابی توخمێک لەناو دەبات.
`getInstance`	شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، دەتوانیت بەم شێوەیە بەکاری بهێنیت: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	شێوازی ئیستاتیک کە نموونەیەکی تاب دەگەڕێنێتەوە کە پەیوەندی بە توخمێکی DOMەوە هەیە یان یەکێکی نوێ دروست دەکات لە ئەگەری دەستپێنەکردن. دەتوانیت بەم شێوەیە بەکاری بهێنیت: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	تابە پێدراوەکە هەڵدەبژێرێت و پەنجەرەی پەیوەندیدارەکەی پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی `shown.bs.tab`ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

ڕووداوەکان

لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:

hide.bs.tab(لە تابە چالاکەکەی ئێستا)
show.bs.tab(لە سەر تابی پیشان دەدرێت)
hidden.bs.tab(لە تابی چالاک پێشوودا، هەمان تابی بۆ hide.bs.tabڕووداوەکە)
shown.bs.tab(لە تابی تازە چالاک کە تازە پیشان دراوە، هەمان تابی بۆ show.bs.tabڕووداوەکە)

ئەگەر پێشتر هیچ تابێک چالاک نەبووە، ئەوا ڕووداوەکانی hide.bs.tabو hidden.bs.tabتەقە ناکرێن.

جۆری ڕووداو	وەسف
`hide.bs.tab`	ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت.
`hidden.bs.tab`	ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت.
`show.bs.tab`	ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
`shown.bs.tab`	ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.

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