Skip to main content

Tabs (Вкладки)

Навігація

Tabs (Вкладки)

techno4 v2.0.4 Core Component MIT License GitHub Repository CO «CF TECHNO4»

Компонент Tabs дозволяє організувати інтерфейс у вигляді окремих вкладок із підтримкою анімованих переходів, свайпів та інтеграції з маршрутизатором (Routable Tabs).

HTML-розмітка вкладок

Контейнер вкладок tabs містить окремі блоки tab. Активна вкладка позначається класом tab-active:
<div class="tabs">
  <!-- Вкладка 1 (активна за замовчуванням) -->
  <div class="tab tab-active" id="tab-1">
    <div class="block">
      <p>Вміст першої вкладки...</p>
    </div>
  </div>
  <!-- Вкладка 2 -->
  <div class="tab" id="tab-2">
    <div class="block">
      <p>Вміст другої вкладки...</p>
    </div>
  </div>
  <!-- Вкладка 3 -->
  <div class="tab" id="tab-3">
    <div class="block">
      <p>Вміст третьої вкладки...</p>
    </div>
  </div>
</div>

Панель перемикання (Tabbar)

Для перемикання вкладок використовується панель інструментів toolbar tabbar із посиланнями tab-link:
<div class="toolbar tabbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab-1" class="tab-link tab-link-active">Вкладка 1</a>
    <a href="#tab-2" class="tab-link">Вкладка 2</a>
    <a href="#tab-3" class="tab-link">Вкладка 3</a>
  </div>
</div>

Керування через JavaScript API

Ви можете програмно перемикати вкладки через екземпляр додатку:
// Показати конкретну вкладку за селектором
app.tab.show('#tab-2');

// Відстеження подій перемикання вкладок
$$('#tab-2').on('tab:show', () => {
  console.log('Вкладку 2 активовано');
});
$$('#tab-2').on('tab:hide', () => {
  console.log('Вкладку 2 приховано');
});

Параметри та методи API

Тип / АргументиМетод / ПодіяОпис дії
Метод
app.tab.show(tabEl, tabLinkEl, animate)
Перемикає активну вкладку на вказану
DOM Подія
tab:show
Спрацьовує при відображенні вкладки
DOM Подія
tab:hide
Спрацьовує при приховуванні вкладки