Navs සහ ටැබ්

Bootstrap හි ඇතුළත් සංචාලන සංරචක භාවිතා කරන ආකාරය සඳහා ලේඛන සහ උදාහරණ.

මෙම පිටුවේ

මූලික නාවික

.navBootstrap හි ඇති සංචාලනය මූලික පන්තියේ සිට සක්‍රිය සහ ආබාධිත තත්ත්වයන් දක්වා සාමාන්‍ය සලකුණු සහ මෝස්තර බෙදා ගනී . එක් එක් විලාසය අතර මාරු වීමට විකරණකාරක පන්ති මාරු කරන්න.

මූලික .navසංරචකය flexbox සමඟ ගොඩනගා ඇති අතර සියලු වර්ගවල සංචාලන සංරචක තැනීම සඳහා ශක්තිමත් පදනමක් සපයයි. එයට සමහර විලාසිතා අභිබවා යාම (ලැයිස්තු සමඟ වැඩ කිරීම සඳහා), විශාල පහර ප්‍රදේශ සඳහා සමහර සබැඳි පෑඩිං සහ මූලික ආබාධිත මෝස්තර ඇතුළත් වේ.

මූලික .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 භාවිතා කරන්න , නැතහොත් මූලද්‍රව්‍යයක් සමඟ ඔබේම රෝල් කරන්න. මක්නිසාද යත් භාවිත , nav සබැඳි nav අයිතම මෙන් ක්‍රියා කරන නමුත් අමතර සලකුණු නොමැතිව ක්‍රියා කරයි.<ol><nav>.navdisplay: flex

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 සංරචකයේ ශෛලිය වෙනස් කරන්න . අවශ්‍ය පරිදි මිශ්‍ර කර ගලපන්න, නැතහොත් ඔබේම දෑ සාදන්න.

තිරස් පෙළගැස්ම

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උපයෝගිතා සමඟ නම්‍ය අයිතම දිශාව වෙනස් කිරීමෙන් ඔබේ සංචලනය ගොඩ ගසන්න . සමහර viewports මත ඒවා ගොඩගැසීමට අවශ්‍ය නමුත් අනෙක් ඒවා නොවේද? ප්‍රතිචාරාත්මක අනුවාද භාවිතා කරන්න (උදා, .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-itemඔබගේ s සමඟ පවතින සියලුම ඉඩ සමානුපාතිකව පිරවීමට , භාවිතා කරන්න .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>

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>

flex උපයෝගිතා සමඟ වැඩ කිරීම

ඔබට ප්‍රතිචාරාත්මක නාවික වෙනස්කම් අවශ්‍ය නම්, 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 භාවිතා කරන්නේ නම්, role="navigation"හි වඩාත්ම තාර්කික මව් කන්ටේනරය වෙත එක් කිරීමට හෝ සම්පූර්ණ සංචාලනය වටා මූලද්‍රව්‍යයක් <ul>එතීමට වග බලා ගන්න. සහායක තාක්‍ෂණයන් මගින් එය සත්‍ය ලැයිස්තුවක් ලෙස ප්‍රකාශ කිරීම වැළැක්විය හැකි බැවින්, <nav>භූමිකාවටම එය එක් නොකරන්න .<ul>

සංචාලන තීරු, .nav-tabsපන්තිය සමඟ ටැබ් ලෙස දෘශ්‍ය ලෙස හැඩගස්වා තිබුණද , , හෝ ගුණාංග ලබා නොදිය යුතු බව සලකන්න. මේවා සුදුසු වන්නේ ARIA කර්තෘ ප්‍රායෝගික මාර්ගෝපදේශ ටැබ් රටාවේ විස්තර කර ඇති පරිදි ගතික ටැබ් අතුරුමුහුණත් සඳහා පමණි . උදාහරණයක් ලෙස මෙම කොටසේ ගතික ටැබ් අතුරුමුහුණත් සඳහා JavaScript හැසිරීම බලන්න . අපගේ ජාවාස්ක්‍රිප්ට් සක්‍රිය ටැබය මත එක් කිරීමෙන් තෝරාගත් තත්වය හසුරුවන බැවින් ගතික ටැබ් කළ අතුරුමුහුණත්වල ගුණාංගය අවශ්‍ය නොවේ .role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

පතනයන් භාවිතා කිරීම

ටිකක් අමතර HTML සහ dropdowns 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 හි එකතු කරන ලදී

Bootstrap හි විකාශනය වන CSS විචල්‍ය ප්‍රවේශයේ කොටසක් ලෙස, 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};

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;

JavaScript හැසිරීම

bootstrap.jsදේශීය අන්තර්ගතයේ ටැබ් කළ හැකි කවුළු සෑදීමට අපගේ සංචාලන ටැබ් සහ පෙති දිගු කිරීමට ටැබ් ජාවාස්ක්‍රිප්ට් ප්ලගිනය-එය තනි තනිව හෝ සම්පාදනය කළ ගොනුව හරහා ඇතුළත් කරන්න.

මෙය මුල් පටිත්තෙහි ආශ්‍රිත අන්තර්ගතයේ තැන් දරණ අන්තර්ගතයකි. වෙනත් ටැබයක් ක්ලික් කිරීමෙන් මීළඟ සඳහා මෙහි දෘශ්‍යතාව ටොගල් කරනු ඇත. JavaScript ටැබය අන්තර්ගත දෘශ්‍යතාව සහ මෝස්තරය පාලනය කිරීමට පන්ති මාරු කරයි. ඔබට එය ටැබ්, පෙති සහ වෙනත් ඕනෑම .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 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 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>

ටැබ් ප්ලගිනය පෙති සමඟද ක්‍රියා කරයි.

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 Authoring Practices Guide ටැබ් රටාවේ විස්තර කර ඇති පරිදි ගතික ටැබ් අතුරුමුහුණත්, උපකාරක තාක්‍ෂණ (තිර කියවනය වැනි) භාවිතා කරන්නන්ට ඒවායේ ව්‍යුහය, ක්‍රියාකාරීත්වය සහ වත්මන් තත්ත්වය ගෙන ඒම සඳහා role="tablist", role="tab", role="tabpanel", සහ අමතර ගුණාංග අවශ්‍ය වේ. aria-හොඳම භාවිතයක් ලෙස, <button>නව පිටුවකට හෝ ස්ථානයකට සංචාලනය කරන සබැඳිවලට වඩා ගතික වෙනසක් ඇති කරන පාලන වන බැවින්, ටැබ් සඳහා මූලද්‍රව්‍ය භාවිතා කිරීම අපි නිර්දේශ කරමු.

ARIA Authoring Practices රටාවට අනුකූලව, දැනට සක්‍රිය ටැබයට පමණක් යතුරුපුවරු අවධානය ලැබේ. tabindex="-1"JavaScript ප්ලගිනය ආරම්භ කළ විට, එය සියලුම අක්‍රිය ටැබ් පාලන මත සකසනු ඇත. දැනට සක්‍රිය ටැබය නාභිගත වූ පසු, කර්සර යතුරු පෙර/ඊළඟ ටැබය සක්‍රිය කරයි, ප්ලගිනය ඒ අනුව රෝවිංtabindex වෙනස් කරයි . කෙසේ වෙතත්, කර්සරයේ ප්‍රධාන අන්තර්ක්‍රියා සම්බන්ධයෙන් JavaScript ප්ලගිනය තිරස් සහ සිරස් ටැබ් ලැයිස්තු අතර වෙනස හඳුනා නොගන්නා බව සලකන්න: ටැබ් ලැයිස්තුවේ දිශානතිය කුමක් වුවත්, ඉහළ සහ වම් කර්සරය පෙර පටිත්ත වෙත යන අතර පහළ සහ දකුණු කර්සරය වෙත යන්න. ඊළඟ ටැබය.

සාමාන්‍යයෙන්, යතුරුපුවරු සංචාලනය පහසු කිරීම සඳහා, ටැබ් පැනලය තුළ අර්ථවත් අන්තර්ගතයන් අඩංගු පළමු මූලද්‍රව්‍යය දැනටමත් නාභිගත කළ හැකි නම් මිස, ටැබ් පැනල් ද නාභිගත කළ හැකි බවට පත් කිරීම නිර්දේශ කෙරේ. tabindex="0"ජාවාස්ක්‍රිප්ට් ප්ලගිනය මෙම අංගය හැසිරවීමට උත්සාහ නොකරයි—සුදුසු අවස්ථාවලදී, ඔබේ සලකුණු කිරීම එක් කිරීමෙන් ඔබේ ටැබ් පැනල පැහැදිලිවම නාභිගත කළ හැකි කිරීමට ඔබට අවශ්‍ය වනු ඇත .

ටැබ් JavaScript ප්ලගිනය පතන මෙනු අඩංගු ටැබ් අතුරුමුහුණත් සඳහා සහය නොදක්වයි , මන්ද මේවා භාවිතා කිරීමේ සහ ප්‍රවේශ්‍යතා ගැටළු දෙකම ඇති කරයි. උපයෝගිතා ඉදිරිදර්ශනයකින්, දැනට සංදර්ශණය වන ටැබ් ප්‍රේරක මූලද්‍රව්‍යය ක්ෂණිකව නොපෙනීම (එය සංවෘත පතන මෙනුව තුළ ඇති බැවින්) ව්‍යාකූලත්වයට හේතු විය හැක. ප්‍රවේශ්‍යතා දෘෂ්ටි කෝණයකින්, මේ ආකාරයේ ඉදිකිරීම් සාමාන්‍ය 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>

JavaScript හරහා

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්‍රිය කළ යුතුය):

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 ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

ටැබ් මූලද්‍රව්‍යයක් ලෙස ඔබගේ අන්තර්ගතය සක්‍රිය කරයි.

ඔබට ඉදිකිරීම්කරු සමඟ ටැබ් අවස්ථාවක් සෑදිය හැක, උදාහරණයක් ලෙස:

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