VGTabs

Переключение панелей, клавиатура, индикатор и удалённый контент.

Вкладки и индикатор

Data API, клавиатура, отключённая вкладка, вертикальное меню и CSS-переменные.

Каждый пример независим. Кнопка «Показать код» раскрывает HTML, JavaScript и CSS, которые используются в самом примере. Стили оболочки и кнопок предоставляет OKAUX 1.0.2.

Data API и клавиатура

Клик, стрелки, Home и End переключают панели. Отключённая вкладка пропускается; введённый текст сохраняется в DOM.

Откройте историю мышью или стрелкой вправо. Значение поля сохранится при переключении.
Эта вкладка отключена.
HTML 
<div class="tabs-demo" id="tabs-basic-demo">
  <div class="vg-tabs">
    <div class="vg-tabs-panel" role="tablist" aria-label="Разделы примера">
      <button type="button" class="vg-tabs-link active" id="tabs-basic-0-tab" data-vg-toggle="tab" data-vg-target="#tabs-basic-0" aria-controls="tabs-basic-0">Обзор</button>
      <button type="button" class="vg-tabs-link" id="tabs-basic-1-tab" data-vg-toggle="tab" data-vg-target="#tabs-basic-1" aria-controls="tabs-basic-1">История</button>
      <button type="button" class="vg-tabs-link" id="tabs-basic-2-tab" data-vg-toggle="tab" data-vg-target="#tabs-basic-2" aria-controls="tabs-basic-2" disabled>Недоступно</button>
    </div>
  </div>
  <div class="vg-tabs-content tabs-demo-content">
    <div class="vg-tabs-pane fade show active" id="tabs-basic-0" tabindex="0">Откройте историю мышью или стрелкой вправо. Значение поля сохранится при переключении.</div>
    <div class="vg-tabs-pane fade" id="tabs-basic-1" tabindex="0"><label>Заметка <input class="form-control" type="text" value="Проверить документы"></label></div>
    <div class="vg-tabs-pane fade" id="tabs-basic-2" tabindex="0">Эта вкладка отключена.</div>
  </div>
</div>
JavaScript 
/**
 * Описание: декларативный пример VGTabs.
 * Возможности: автоматическая обработка вкладок через Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Токены OKAUX в демо настроены с префиксом vg; состояние темы общее. */
.tabs-demo { min-width: 0; }
.tabs-demo-content {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--vg-border-default);
  border-radius: var(--vg-radius-md);
  background: var(--vg-bg-secondary);
  overflow-wrap: anywhere;
}
.tabs-demo-custom {
  --vg-tabs-panel-gap: 0.35rem;
  --vg-tabs-link-padding-x: 0.75rem;
  --vg-tabs-slider-border-radius: 999px;
  --vg-tabs-track-slider-border-radius: 999px;
}
.tabs-demo-vertical {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.tabs-demo-vertical > .tabs-demo-content { margin-top: 0; }
@media (max-width: 575.98px) {
  .tabs-demo-vertical { grid-template-columns: minmax(0, 1fr); }
}
.tabs-demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tabs-demo-status { margin-top: 1rem; }
.tabs-demo-log { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; }

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

Кнопки расположены слева в колонке шириной 150 px, контент — справа. Стрелки вверх и вниз переключают разделы. На узком экране контент переносится под кнопки.

Профиль: содержимое самостоятельной панели.
Доступ: содержимое самостоятельной панели.
HTML 
<div class="tabs-demo tabs-demo-vertical" id="tabs-vertical-demo">
  <div class="vg-tabs">
    <div class="vg-tabs-panel vg-tabs-column" role="tablist" aria-label="Разделы примера" aria-orientation="vertical">
      <button type="button" class="vg-tabs-link active" id="tabs-vertical-0-tab" data-vg-toggle="tab" data-vg-target="#tabs-vertical-0" aria-controls="tabs-vertical-0">Профиль</button>
      <button type="button" class="vg-tabs-link" id="tabs-vertical-1-tab" data-vg-toggle="tab" data-vg-target="#tabs-vertical-1" aria-controls="tabs-vertical-1">Доступ</button>
    </div>
  </div>
  <div class="vg-tabs-content tabs-demo-content">
    <div class="vg-tabs-pane show active" id="tabs-vertical-0" tabindex="0">Профиль: содержимое самостоятельной панели.</div>
    <div class="vg-tabs-pane" id="tabs-vertical-1" tabindex="0">Доступ: содержимое самостоятельной панели.</div>
  </div>
</div>
JavaScript 
/**
 * Описание: декларативный пример VGTabs.
 * Возможности: автоматическая обработка вкладок через Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Токены OKAUX в демо настроены с префиксом vg; состояние темы общее. */
.tabs-demo { min-width: 0; }
.tabs-demo-content {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--vg-border-default);
  border-radius: var(--vg-radius-md);
  background: var(--vg-bg-secondary);
  overflow-wrap: anywhere;
}
.tabs-demo-custom {
  --vg-tabs-panel-gap: 0.35rem;
  --vg-tabs-link-padding-x: 0.75rem;
  --vg-tabs-slider-border-radius: 999px;
  --vg-tabs-track-slider-border-radius: 999px;
}
.tabs-demo-vertical {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.tabs-demo-vertical > .tabs-demo-content { margin-top: 0; }
@media (max-width: 575.98px) {
  .tabs-demo-vertical { grid-template-columns: minmax(0, 1fr); }
}
.tabs-demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tabs-demo-status { margin-top: 1rem; }
.tabs-demo-log { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; }

Индикатор и оформление

data-slide включает индикатор наведения и активной вкладки. Геометрия обновляется при переключении и изменении ширины.

День: содержимое самостоятельной панели.
Неделя: содержимое самостоятельной панели.
Месяц: содержимое самостоятельной панели.
HTML 
<div class="tabs-demo" id="tabs-slider-demo">
  <div class="vg-tabs tabs-demo-custom" data-slide="true">
    <div class="vg-tabs-panel" role="tablist" aria-label="Разделы примера">
      <div class="vg-tabs-item"><button type="button" class="vg-tabs-link active" id="tabs-slider-0-tab" data-vg-toggle="tab" data-vg-target="#tabs-slider-0" aria-controls="tabs-slider-0">День</button></div>
      <div class="vg-tabs-item"><button type="button" class="vg-tabs-link" id="tabs-slider-1-tab" data-vg-toggle="tab" data-vg-target="#tabs-slider-1" aria-controls="tabs-slider-1">Неделя</button></div>
      <div class="vg-tabs-item"><button type="button" class="vg-tabs-link" id="tabs-slider-2-tab" data-vg-toggle="tab" data-vg-target="#tabs-slider-2" aria-controls="tabs-slider-2">Месяц</button></div>
    </div>
  </div>
  <div class="vg-tabs-content tabs-demo-content">
    <div class="vg-tabs-pane show active" id="tabs-slider-0" tabindex="0">День: содержимое самостоятельной панели.</div>
    <div class="vg-tabs-pane" id="tabs-slider-1" tabindex="0">Неделя: содержимое самостоятельной панели.</div>
    <div class="vg-tabs-pane" id="tabs-slider-2" tabindex="0">Месяц: содержимое самостоятельной панели.</div>
  </div>
</div>
JavaScript 
/**
 * Описание: декларативный пример VGTabs.
 * Возможности: автоматическая обработка вкладок через Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Токены OKAUX в демо настроены с префиксом vg; состояние темы общее. */
.tabs-demo { min-width: 0; }
.tabs-demo-content {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--vg-border-default);
  border-radius: var(--vg-radius-md);
  background: var(--vg-bg-secondary);
  overflow-wrap: anywhere;
}
.tabs-demo-custom {
  --vg-tabs-panel-gap: 0.35rem;
  --vg-tabs-link-padding-x: 0.75rem;
  --vg-tabs-slider-border-radius: 999px;
  --vg-tabs-track-slider-border-radius: 999px;
}
.tabs-demo-vertical {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.tabs-demo-vertical > .tabs-demo-content { margin-top: 0; }
@media (max-width: 575.98px) {
  .tabs-demo-vertical { grid-template-columns: minmax(0, 1fr); }
}
.tabs-demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tabs-demo-status { margin-top: 1rem; }
.tabs-demo-log { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; }