Bootstrap 5 Tabs (вкладки)

Основные концепции

• Навигационные элементы (Tab Navigation): Содержат ссылки для переключения между разделами.
• Контейнеры содержимого (Tab Content): Содержат скрытые и видимые разделы контента.
• JavaScript: Управляет переключением вкладок.

Базовая структура вкладок

Пример базового использования:

<div>
  <!-- Навигационные элементы -->
  <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">Главная</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">Профиль</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Контакты</button>
    </li>
  </ul>

  <!-- Контейнеры содержимого -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      Контент вкладки Главная
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      Контент вкладки Профиль
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      Контент вкладки Контакты
    </div>
  </div>
</div>

Объяснение кода:

1. ul.nav-tabs: создает список навигации, который будет выглядеть как вкладки.
2. button.nav-link: используются для переключения вкладок.
   • Атрибут data-bs-toggle="tab" связывает кнопку с соответствующим контентом.
   • Атрибут data-bs-target="#id" указывает ID контейнера контента.
3. div.tab-content: содержит контент для каждой вкладки.
4. div.tab-pane: описывает содержимое каждой вкладки.
   • Класс fade добавляет анимацию.
   • Класс show active используется для отображения активной вкладки.

Горизонтальное выравнивание

Вкладки можно выравнивать по центру или вправо, добавив классы justify-content-center или justify-content-end к контейнеру nav.

<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
  <!-- Содержимое -->
</ul>

Вариации дизайна

Навигация в виде кнопок (Pills)

<ul class="nav nav-pills" 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>
</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">Home Content</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Profile Content</div>
</div>

Вертикальные вкладки

В бутстрап 5 вкладки можно расположить вертикально, добавив классы для стилизации. Это удобно, если требуется разместить больше вкладок или сделать интерфейс более компактным.

Пример:

<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-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">Home Content</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile Content</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages Content</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings Content</div>
  </div>
</div>

JavaScript API

Включение через JavaScript

Если вы хотите управлять вкладками программно, используйте методы Tab API.

Инициализация вкладки

var triggerEl = document.querySelector('#home-tab');
var tab = new bootstrap.Tab(triggerEl);
tab.show(); // Показать вкладку

События

Можно отслеживать переключение вкладок с помощью событий:

• show.bs.tab: Срабатывает до показа новой вкладки.
• shown.bs.tab: Срабатывает после показа новой вкладки.
• hide.bs.tab: Срабатывает до скрытия вкладки.
• hidden.bs.tab: Срабатывает после скрытия вкладки.

var myTab = document.getElementById('myTab');
myTab.addEventListener('shown.bs.tab', function (event) {
  console.log('Активная вкладка:', event.target); // Активная вкладка
  console.log('Предыдущая вкладка:', event.relatedTarget); // Предыдущая вкладка
});

Полезные трюки

Динамическое добавление вкладок

// Добавление новой вкладки
var newTab = document.createElement('button');
newTab.className = 'nav-link';
newTab.id = 'new-tab';
newTab.dataset.bsToggle = 'tab';
newTab.dataset.bsTarget = '#new-content';
newTab.type = 'button';
newTab.role = 'tab';
newTab.innerText = 'New Tab';

document.querySelector('.nav-tabs').appendChild(newTab);

// Добавление содержимого
var newContent = document.createElement('div');
newContent.className = 'tab-pane fade';
newContent.id = 'new-content';
newContent.role = 'tabpanel';
newContent.innerText = 'New Content';

document.querySelector('.tab-content').appendChild(newContent);

Стилизация

Если требуется изменить внешний вид вкладок, используйте собственные CSS-классы.

.nav-tabs .nav-link.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff #007bff #fff;
}

.nav-tabs .nav-link {
  color: #007bff;
}

Рекомендации

1. Адаптивность. Убедитесь, что вкладки корректно отображаются на всех устройствах.
2. Акцент на доступность. Используйте атрибуты aria-* для улучшения взаимодействия с экранными считывателями.
3. Минимизация контента. Старайтесь не перегружать вкладки слишком большим количеством информации.

Заключение

Теперь вы знаете, как создать вкладки с помощью Bootstrap 5. Это отличный способ организовать контент и улучшить пользовательский интерфейс вашего сайта. Если у вас есть какие-либо вопросы или вам нужна дополнительная помощь, не стесняйтесь спрашивать!