ნავიგაცია და ჩანართები

დოკუმენტაცია და მაგალითები, თუ როგორ გამოიყენოთ Bootstrap-ის ნავიგაციის კომპონენტები.

ამ გვერდზე

ბაზის ნავი

Bootstrap-ში ხელმისაწვდომი ნავიგაცია იზიარებს ზოგად მარკირებას და სტილებს, საბაზისო .navკლასიდან აქტიურ და გამორთული მდგომარეობებამდე. შეცვალეთ მოდიფიკატორის კლასები თითოეულ სტილს შორის გადასართავად.

საბაზისო .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 როგორც ზემოთ, <ol>თუ თქვენი ნივთების თანმიმდევრობა მნიშვნელოვანია, ან გააფართოვეთ თქვენი <nav>ელემენტი. იმის გამო, რომ .navიყენებს display: flex, 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>

ხელმისაწვდომი სტილები

შეცვალეთ .navs კომპონენტის სტილი მოდიფიკატორებით და კომუნალური საშუალებებით. შეურიეთ და შეადარეთ საჭიროებისამებრ, ან შექმენით საკუთარი.

ჰორიზონტალური განლაგება

შეცვალეთ თქვენი ნავიგაციის ჰორიზონტალური განლაგება flexbox-ის კომუნალური საშუალებებით . ნაგულისხმევად, ნავიგები არის მარცხნივ გასწორებული, მაგრამ თქვენ შეგიძლიათ მარტივად შეცვალოთ ისინი ცენტრში ან მარჯვნივ.

ცენტრშია .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-tabsკლასს ჩანართიანი ინტერფეისის შესაქმნელად. გამოიყენეთ ისინი ჩანართის რეგიონების შესაქმნელად ჩვენი ჩანართის 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">
    <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. ყურადღება მიაქციეთ, რომ მთელი ჰორიზონტალური სივრცე დაკავებულია, მაგრამ ნავიგაციის ყველა ელემენტს არ აქვს იგივე სიგანე.

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-fillზემოაღნიშნულისგან განსხვავებით, ნავიგაციის ყველა ელემენტი იგივე სიგანე იქნება.

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 utilities-თან

თუ თქვენ გჭირდებათ საპასუხო ნავიგაციის ვარიაციები, განიხილეთ flexbox უტილიტების სერიის გამოყენება . მიუხედავად იმისა, რომ უფრო ვრცელი, ეს უტილიტები გვთავაზობენ უფრო მეტ პერსონალიზაციას საპასუხო წყვეტის წერტილებში. ქვემოთ მოყვანილ მაგალითში, ჩვენი ნავი განლაგდება ყველაზე დაბალ წყვეტის წერტილზე, შემდეგ მოერგება ჰორიზონტალურ განლაგებას, რომელიც ავსებს ხელმისაწვდომ სიგანეს მცირე წყვეტის წერტილიდან დაწყებული.

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- role="navigation"ს ყველაზე ლოგიკურ მშობელ კონტეინერში <ul>, ან გადაიტანეთ <nav>ელემენტი მთელ ნავიგაციაზე. არ დაამატოთ როლი <ul>თავისთავად, რადგან ეს ხელს შეუშლის მის გამოცხადებას დამხმარე ტექნოლოგიების მიერ რეალურ სიაში.

გაითვალისწინეთ, რომ ნავიგაციის ზოლები, თუნდაც ვიზუალურად იყოს სტილიზებული, როგორც ჩანართები .nav-tabsკლასთან, არ უნდა იყოს მინიჭებული role="tablist"ან ატრიბუტები. ისინი შესაფერისია მხოლოდ დინამიური ჩანართის ინტერფეისებისთვის, როგორც ეს აღწერილია ARIA ავტორინგის პრაქტიკის სახელმძღვანელოს ჩანართების შაბლონში . მაგალითად, იხილეთ JavaScript-ის ქცევა დინამიური ჩანართი ინტერფეისებისთვის ამ განყოფილებაში. ატრიბუტი საჭირო არ არის დინამიურ ჩანართის ინტერფეისებზე, რადგან ჩვენი JavaScript ამუშავებს შერჩეულ მდგომარეობას აქტიური ჩანართის დამატებით.role="tab"role="tabpanel"aria-currentaria-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-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, ნავი ახლა იყენებს ადგილობრივ 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 ქცევა

გამოიყენეთ ჩანართის 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 ავტორინგის პრაქტიკის სახელმძღვანელოს ჩანართების შაბლონში , მოითხოვს role="tablist", role="tab", role="tabpanel"და დამატებით aria-ატრიბუტებს, რათა გადასცეს მათი სტრუქტურა, ფუნქციონალი და მიმდინარე მდგომარეობა დამხმარე ტექნოლოგიების მომხმარებლებს (როგორიცაა ეკრანის წამკითხველები). როგორც საუკეთესო პრაქტიკა, ჩვენ გირჩევთ გამოიყენოთ <button>ელემენტები ჩანართებისთვის, რადგან ეს არის კონტროლი, რომელიც იწვევს დინამიურ ცვლილებას, ვიდრე ბმულები, რომლებიც გადადიან ახალ გვერდზე ან მდებარეობაზე.

ARIA საავტორო პრაქტიკის ნიმუშის შესაბამისად, მხოლოდ ამჟამად აქტიური ჩანართი იღებს კლავიატურაზე ფოკუსს. როდესაც JavaScript მოდული ინიციალიზდება, ის დაყენდება tabindex="-1"ყველა უმოქმედო ჩანართის კონტროლზე. მას შემდეგ, რაც ამჟამად აქტიურ ჩანართს აქვს ფოკუსირება, კურსორის ღილაკები ააქტიურებენ წინა/შემდეგ ჩანართს, მოდული კი შესაბამისად ცვლის გადაადგილებასtabindex . თუმცა, გაითვალისწინეთ, რომ JavaScript დანამატი არ განასხვავებს ჰორიზონტალურ და ვერტიკალურ ჩანართის სიებს, როდესაც საქმე ეხება კურსორის კლავიშთა ურთიერთქმედებებს: ჩანართის სიის ორიენტაციის მიუხედავად, კურსორი ზემოთ და მარცხენა გადადის წინა ჩანართზე, ხოლო ქვემოთ და მარჯვენა კურსორი გადადის შემდეგი ჩანართი.

ზოგადად, კლავიატურაზე ნავიგაციის გასაადვილებლად, რეკომენდებულია ჩანართების პანელებიც ფოკუსირებადი გახადოთ, გარდა იმ შემთხვევისა, როდესაც პირველი ელემენტი, რომელიც შეიცავს მნიშვნელოვან შინაარსს ჩანართების პანელის შიგნით, უკვე ფოკუსირებადია. JavaScript მოდული არ ცდილობს ამ ასპექტის დამუშავებას - საჭიროების შემთხვევაში, თქვენ მოგიწევთ მკაფიოდ გახადოთ თქვენი ჩანართების პანელები ფოკუსირებადი tabindex="0"მარკირების დამატებით.

ჩანართის JavaScript მოდული არ უჭერს მხარს ჩანართიან ინტერფეისებს, რომლებიც შეიცავს ჩამოსაშლელ მენიუებს, რადგან ეს იწვევს როგორც გამოყენებადობის, ასევე ხელმისაწვდომობის პრობლემებს. გამოყენებადობის პერსპექტივიდან, იმ ფაქტმა, რომ ამჟამად ნაჩვენები ჩანართის გამომწვევი ელემენტი დაუყოვნებლივ არ ჩანს (რადგან ის დახურულ ჩამოსაშლელ მენიუშია) შეიძლება გამოიწვიოს დაბნეულობა. ხელმისაწვდომობის თვალსაზრისით, ამჟამად არ არსებობს გონივრული გზა ამ ტიპის კონსტრუქციის სტანდარტული WAI ARIA-ს შაბლონზე გადასატანად, რაც იმას ნიშნავს, რომ ის ადვილად გასაგები არ იქნება დამხმარე ტექნოლოგიების მომხმარებლებისთვის.

მონაცემთა ატრიბუტების გამოყენება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით 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-ის საშუალებით

ჩანართის ჩანართების ჩართვა 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
})