ДокументацияРазделы, компоненты, системы и их подразделы
Tabs
Переключение связанных представлений
Parallel views
Tabs переключают представления одного контекста
Используйте вкладки для профиля, настроек объекта или параллельных срезов одних данных. Переход между разными разделами продукта должен оставаться обычной навигацией.
Интерактивные панели со slider
Кликните вкладку или используйте стрелки, Home и End. Ядро синхронизирует выбранный trigger и соответствующую панель.
Проект Atlas
Основные сведения и статус текущего проекта.
Команда
12 участников, 3 владельца пространства.
Доступы
Роли, приглашения и внешние пользователи.
Биллинг
Раздел пока недоступен.
HTMLTabs с панелями
<div class="ox-tabs" data-ox-ui="tabs" data-ox-slide="true">
<div class="ox-tabs-nav">
<button class="ox-tabs-trigger is-active" data-ox-target="#overview">Обзор</button>
<button class="ox-tabs-trigger" data-ox-target="#team">Команда</button>
</div>
<div class="ox-tabs-content">
<section class="ox-tabs-pane is-active is-fade" id="overview">...</section>
<section class="ox-tabs-pane is-fade" id="team">...</section>
</div>
</div>Горизонтальный и вертикальный варианты
Базовая строка подходит для короткого набора. Вертикальный вариант полезен при более длинных названиях и устойчивой широкой области.
.ox-tabsГоризонтальная композиция по умолчанию..ox-tabs.is-verticalНавигация слева, панель справа; на mobile снова одна колонка.data-ox-slide="true"Добавляет двигающийся фон активного trigger..ox-tabs-pane.is-fadeПлавный переход между панелями.disabledНедоступная вкладка пропускается клавиатурной навигацией.Не переполнятьПри большом количестве используйте Select или отдельную навигацию.
Hash и клавиатура
Hash выключен по умолчанию. Включайте его, если конкретное представление должно иметь ссылку и восстанавливаться после перезагрузки.
data-ox-hash="false"При true записывает id активной панели в URL.ArrowLeft · ArrowUpПредыдущая доступная вкладка.ArrowRight · ArrowDownСледующая доступная вкладка.Home · EndПервая или последняя доступная вкладка.data-ox-targetCSS-селектор панели внутри текущего Tabs.Один activeНачальное состояние задайте одной паре trigger/pane.
API, события и доступность
Роли tablist, tab и tabpanel, выбранность, tabindex и связи aria-labelledby ядро назначает автоматически.
JavaScriptВыбор вкладки
import { Tabs } from 'okaux/js/app.js';
const tabs = Tabs.getOrCreateInstance({
element: document.querySelector('[data-ox-ui="tabs"]'),
});
tabs.show(1);
tabs.show('team');tabs:showПеред выбором новой панели; событие можно отменить.tabs:shownПосле применения нового состояния.tabs:hideПеред снятием предыдущей вкладки.tabs:hiddenПосле скрытия предыдущей панели.aria-selectedСинхронизируется на каждом trigger.Фокус панелиtabpanel получает tabindex="0" для последовательного чтения.