Navs va yorliqlar

Bootstrap-ning navigatsiya komponentlaridan qanday foydalanish bo'yicha hujjatlar va misollar.

Ushbu sahifada

Asosiy nav

.navBootstrap-da mavjud navigatsiya asosiy sinfdan faol va o'chirilgan holatlargacha bo'lgan umumiy belgilar va uslublarni taqsimlaydi . Har bir uslub oʻrtasida almashish uchun modifikator sinflarini almashtiring.

Asosiy .navkomponent flexbox bilan qurilgan va barcha turdagi navigatsiya komponentlarini yaratish uchun mustahkam poydevor yaratadi. U ba'zi uslublarni bekor qilishni (ro'yxatlar bilan ishlash uchun), kattaroq tegish joylari uchun havolalarni to'ldirishni va asosiy o'chirilgan uslubni o'z ichiga oladi.

Asosiy .navkomponent hech qanday holatni o'z ichiga olmaydi .active. Quyidagi misollar sinfni o'z ichiga oladi, asosan bu alohida sinf hech qanday maxsus uslubni ishga tushirmasligini ko'rsatish uchun.

Faol holatni yordamchi texnologiyalarga etkazish uchun aria-currentatributdan foydalaning — pagejoriy sahifa qiymati yoki truetoʻplamdagi joriy element uchun.

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>

Sinflar davomida ishlatiladi, shuning uchun belgilashingiz juda moslashuvchan bo'lishi mumkin. <ul>Agar narsalaringiz tartibi muhim bo'lsa, yuqoridagi kabi s dan foydalaning <ol>yoki o'zingizni <nav>element bilan aylantiring. Foydalanishlari sababli, .navnavigatsiya display: flexhavolalari nav elementlari bilan bir xil ishlaydi, ammo qo'shimcha belgilarsiz.

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>

Mavjud uslublar

.navModifikatorlar va yordamchi dasturlar yordamida s komponentining uslubini o'zgartiring. Agar kerak bo'lsa, aralashtiring va moslang yoki o'zingizni yarating.

Gorizontal tekislash

Navigatoringizning gorizontal hizalanishini flexbox yordam dasturlari bilan o'zgartiring . Odatiy bo'lib, navbatlar chapga hizalanadi, lekin siz ularni markazga yoki o'ngga osongina o'zgartirishingiz mumkin.

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

O'ngga tekislangan .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>

Vertikal

Yordamchi dastur yordamida moslashuvchan element yo'nalishini o'zgartirib, navigatsiyangizni to'plang .flex-column. Ularni ba'zi ko'rish oynalarida to'plash kerakmi, boshqalari emasmi? Javob beruvchi versiyalardan foydalaning (masalan, .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>

Har doimgidek, vertikal navigatsiya <ul>s holda ham mumkin.

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>

Yorliqlar

Yuqoridan asosiy navbatni oladi va .nav-tabsyorliqli interfeys yaratish uchun sinfni qo'shadi. Bizning tab JavaScript plaginimiz bilan tabbable hududlarni yaratish uchun ulardan foydalaning .

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>

Tabletkalar

Xuddi shu HTMLni oling, lekin .nav-pillso'rniga foydalaning:

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>

To'ldiring va asoslang

Tarkibingizni .navikkita modifikator sinfidan birining to'liq mavjud kengligini kengaytirishga majburlang. Barcha mavjud bo'sh joyni s bilan mutanosib ravishda to'ldirish uchun .nav-itemdan foydalaning .nav-fill. E'tibor bering, barcha gorizontal bo'sh joy egallangan, ammo har bir nav elementi bir xil kenglikka ega emas.

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>

Asoslangan navigatsiyadan foydalanganda , faqat uslublash elementlari uchun zarur bo'lganligi sababli <nav>xavfsiz o'tkazib yuborishingiz mumkin ..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>

Teng kenglikdagi elementlar uchun dan foydalaning .nav-justified. Barcha gorizontal bo'shliqlar navbatma-navbat havolalari bilan band bo'ladi, lekin .nav-fillyuqoridagilardan farqli o'laroq, har bir navbat elementi bir xil kenglikda bo'ladi.

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>

navigatsiyaga asoslangan .nav-fillmisolga o'xshash .<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 utilitlari bilan ishlash

Agar sizga sezgir navigatsiya o'zgarishlari kerak bo'lsa, bir qator flexbox yordam dasturlaridan foydalanishni o'ylab ko'ring . Ko'proq batafsil ma'lumotga ega bo'lsa-da, ushbu yordam dasturlari sezgir to'xtash nuqtalarida ko'proq moslashtirishni taklif qiladi. Quyidagi misolda bizning navbatimiz eng past to'xtash nuqtasiga joylashtiriladi, keyin kichik to'xtash nuqtasidan boshlab mavjud kenglikni to'ldiradigan gorizontal tartibga moslashadi.

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>

Foydalanish imkoniyati haqida

Agar siz navigatsiya panelini taqdim qilish uchun navlardan foydalanayotgan bo'lsangiz, role="navigation"ning eng mantiqiy ota-konteyneriga a qo'shing <ul>yoki <nav>elementni butun navigatsiya atrofiga o'rashni unutmang. Rolni o'ziga qo'shmang <ul>, chunki bu uning yordamchi texnologiyalar tomonidan haqiqiy ro'yxat sifatida e'lon qilinishiga to'sqinlik qiladi.

Yodda tutingki, navigatsiya paneli, hatto .nav-tabssinf bilan yorliqlar sifatida tasvirlangan bo'lsa ham , , yoki atributlar berilmasligi kerak . Bular ARIA mualliflik amaliyotlari qo‘llanmasi yorliqlari namunasida tasvirlanganidek, faqat dinamik yorliqli interfeyslar uchun mos keladi . Misol uchun ushbu bo'limdagi dinamik yorliqli interfeyslar uchun JavaScript xatti-harakatiga qarang . Atribut dinamik yorliqli interfeyslarda kerak emas, chunki bizning JavaScript tanlangan holatni faol yorliqga qo'shish orqali boshqaradi.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Ochiladigan menyulardan foydalanish

Bir oz qo'shimcha HTML va ochiladigan menyular JavaScript plagini bilan ochiladigan menyularni qo'shing .

Ochiladigan yorliqlar

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>

Ochiladigan tabletkalar

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

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida navlar endi real vaqt rejimini yaxshilash uchun .nav, .nav-tabs, va ustidagi mahalliy CSS o'zgaruvchilardan foydalanadi .nav-pills. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

Asosiy sinfda .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-tabsModifikator sinfida :

  --#{$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-pillsModifikator sinfida :

  --#{$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 o'zgaruvchilari

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

bootstrap.jsMahalliy kontentning yorliqli panellarini yaratish uchun navigatsiya yorliqlarimiz va tabletkalarimizni kengaytirish uchun JavaScript plaginidan foydalaning (uni alohida yoki tuzilgan fayl orqali kiriting).

Bu “ Uy” sahifasi bilan bog‘langan ba’zi bir to‘ldiruvchi kontent. Boshqa varaqni bosish, buning keyingisiga koʻrinishini almashtiradi. JavaScript yorlig'i kontent ko'rinishini va uslubni boshqarish uchun sinflarni almashtiradi. Siz uni yorliqlar, tabletkalar va boshqa har qanday .navnavigatsiya bilan ishlatishingiz mumkin.

Bu Profil sahifasi bilan bog‘liq bo‘lgan ba’zi bir to‘ldiruvchi kontent. Boshqa varaqni bosish, buning keyingisiga koʻrinishini almashtiradi. JavaScript yorlig'i kontent ko'rinishini va uslubni boshqarish uchun sinflarni almashtiradi. Siz uni yorliqlar, tabletkalar va boshqa har qanday .navnavigatsiya bilan ishlatishingiz mumkin.

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>

Ehtiyojlaringizni qondirishga yordam berish uchun, bu <ul>yuqorida ko'rsatilganidek, asosli belgilash bilan yoki har qanday o'zboshimchalik bilan "o'zingizni siljitish" belgisi bilan ishlaydi. E'tibor bering, agar siz dan foydalanayotgan bo'lsangiz <nav>, unga to'g'ridan-to'g'ri qo'shmasligingiz kerak role="tablist", chunki bu elementning navigatsiya belgisi sifatida asosiy rolini bekor qiladi. Buning o'rniga, muqobil elementga o'ting (quyidagi misolda oddiy <div>) va uning <nav>atrofini o'rab oling.

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>

Tablar plagini tabletkalar bilan ham ishlaydi.

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>

Va vertikal tabletkalar bilan. Ideal holda, vertikal yorliqlar uchun siz yorliqlar aria-orientation="vertical"ro'yxati konteyneriga ham qo'shishingiz kerak.

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>

Foydalanish imkoniyati

ARIA Mualliflik Amaliyotlari Qoʻllanmasi yorliqlari naqshida tasvirlangan dinamik yorliqli interfeyslar, ularning tuzilishi, funksionalligi va joriy holatini yordamchi texnologiyalar foydalanuvchilariga (masalan, ekranni oʻqiydiganlar) yetkazish uchun role="tablist", role="tab", role="tabpanel", va qoʻshimcha atributlarni talab qiladi . aria-Eng yaxshi amaliyot sifatida biz <button>yorliqlar uchun elementlardan foydalanishni tavsiya qilamiz, chunki ular yangi sahifa yoki manzilga oʻtadigan havolalar emas, balki dinamik oʻzgarishlarni keltirib chiqaradigan boshqaruv elementlari.

ARIA Authoring Practices naqshiga muvofiq, faqat hozirda faol yorliq klaviatura fokusini oladi. JavaScript plagini ishga tushirilganda, u tabindex="-1"barcha faol bo'lmagan tab boshqaruvlarida o'rnatiladi. Joriy faol yorliq fokusga ega bo'lgandan so'ng, kursor tugmalari oldingi/keyingi yorliqni faollashtiradi, plagin mos ravishda harakatnitabindex o'zgartiradi . Shu bilan birga, JavaScript plagini kursor tugmachalarining oʻzaro taʼsiri haqida gap ketganda gorizontal va vertikal yorliqlar roʻyxatini ajratmasligini unutmang: yorliqlar roʻyxatining yoʻnalishidan qatʼi nazar, yuqoriga va chap kursor oldingi yorliqga, pastga va oʻng kursor esa quyidagiga oʻtadi. keyingi yorliq.

Umuman olganda, klaviatura navigatsiyasini osonlashtirish uchun, agar yorliqlar paneli ichidagi mazmunli tarkibni o'z ichiga olgan birinchi element allaqachon fokuslansa, yorliqlar panellarining o'zini ham diqqatni jalb qilish tavsiya etiladi. JavaScript plagini bu jihatni ko'rib chiqishga urinmaydi - agar kerak bo'lsa tabindex="0", belgilashga qo'shish orqali yorliqlar panellarini aniq fokuslanishi kerak bo'ladi.

Yorliq JavaScript plagini ochiladigan menyularni o'z ichiga olgan yorliqli interfeyslarni qo'llab -quvvatlamaydi, chunki ular qulaylik va foydalanish imkoniyatlari bilan bog'liq muammolarni keltirib chiqaradi. Foydalanish nuqtai nazaridan, hozirda ko'rsatilgan yorliqning tetik elementi darhol ko'rinmasligi (u yopiq ochiladigan menyuda bo'lgani kabi) chalkashlikka olib kelishi mumkin. Mavjudlik nuqtai nazaridan, hozirda bu turdagi konstruksiyani standart WAI ARIA naqshiga solishning oqilona usuli yo‘q, ya’ni uni yordamchi texnologiyalar foydalanuvchilari uchun osonlik bilan tushunib bo‘lmaydi.

Ma'lumotlar atributlaridan foydalanish

Siz biron bir JavaScript yozmasdan yorliq yoki tabletka navigatsiyasini oddiygina belgilab data-bs-toggle="tab"yoki data-bs-toggle="pill"elementda faollashtirishingiz mumkin. Ushbu ma'lumotlar atributlaridan .nav-tabsyoki da foydalaning .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 orqali

JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):

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

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

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

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

Yopish effekti

Yorliqlarni .fadeoʻchirish uchun har biriga qoʻshing .tab-pane. Birinchi yorliq paneli ham .showboshlang'ich tarkibni ko'rinadigan qilish kerak.

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

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .

Kontentingizni yorliq elementi sifatida faollashtiradi.

Siz konstruktor yordamida tab misolini yaratishingiz mumkin, masalan:

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

Usul	Tavsif
`dispose`	Elementning yorlig'ini yo'q qiladi.
`getInstance`	DOM elementi bilan bog'langan yorliq misolini olish imkonini beruvchi statik usul, uni quyidagicha ishlatishingiz mumkin: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM elementi bilan bog'langan yorliq misolini qaytaradigan yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Berilgan yorliqni tanlaydi va unga bog'langan panelni ko'rsatadi. Oldin tanlangan har qanday boshqa yorliq tanlanmagan bo'ladi va u bilan bog'liq bo'lgan panel yashiriladi. Qo'ng'iroq qiluvchiga yorliqlar paneli ko'rsatilishidan oldin (ya'ni `shown.bs.tab`voqea sodir bo'lishidan oldin) qaytadi.

Voqealar

Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:

hide.bs.tab(joriy faol yorliqda)
show.bs.tab(ko'rsatiladigan yorliqda)
hidden.bs.tab(oldingi faol yorliqda, voqea uchun bir xil hide.bs.tab)
shown.bs.tab(yangi faol ko'rsatilgan yorliqda, xuddi show.bs.tabvoqea uchun)

Hech qanday yorliq allaqachon faol bo'lmagan bo'lsa, hide.bs.tabva hidden.bs.tabvoqealari o'chirilmaydi.

Tadbir turi	Tavsif
`hide.bs.tab`	Ushbu hodisa yangi yorliq ko'rsatilishi kerak bo'lganda boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Joriy faol yorliq va yaqinda faol boʻladigan yangi yorliq uchun mos ravishda va `event.target`foydalaning .`event.relatedTarget`
`hidden.bs.tab`	Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Oldingi faol yorliq va yangi faol yorliq uchun mos ravishda `event.target`va dan foydalaning .`event.relatedTarget`
`show.bs.tab`	Bu voqea tab ko'rsatishda ishga tushadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va `event.target`foydalaning .`event.relatedTarget`
`shown.bs.tab`	Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va `event.target`foydalaning .`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
})