VGSidebar

Боковая панель

Поведение и навигация

Прокрутка страницы, Escape, URL-хэш и анимации.

Панели открываются поверх текущей страницы. Их разметка размещена в конце body, вне контейнеров с transform и overflow. Код каждого примера используется и в самой демонстрации. Кнопки и тема — OKAUX 1.0.2, поведение панелей — VGSidebar.

Без подложки и блокировки страницы

backdrop: false убирает фон; overflow: false разрешает прокрутку. Это два независимых параметра, а не один режим.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-nonmodal" aria-controls="sidebar-nonmodal" aria-expanded="false">Открыть без подложки</button>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-nonmodal" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-nonmodal-title" data-backdrop="false" data-overflow="false">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-nonmodal-title">Справочная панель</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-nonmodal" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Страница остаётся доступной: попробуйте прокрутить её или повторно нажать кнопку открытия.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-nonmodal">Закрыть панель</button>
    </div>
</aside>

// Дополнительная инициализация не требуется: используется Data API.

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Запрет Escape

keyboard: false блокирует только Escape. Фактическое событие называется hidePrevented.vg.sidebar; число нажатий выводится внутри панели.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-keyboard" aria-controls="sidebar-keyboard" aria-expanded="false">Проверить Escape</button>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-keyboard" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-keyboard-title" data-keyboard="false">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-keyboard-title">Явное закрытие</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-keyboard" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Escape не закроет панель. Кнопки и подложка продолжают работать.</p><p id="sidebar-keyboard-status" role="status">Нажмите Escape.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-keyboard">Закрыть панель</button>
    </div>
</aside>

/**
 * Описание: наблюдение за запретом закрытия VGSidebar клавишей Escape.
 * Возможности: вывод фактического DOM-события hidePrevented.vg.sidebar.
 */
function initSidebarDemo() {
    const panel = document.querySelector('#sidebar-keyboard');
    if (!panel) return;
    let attempts = 0;
    // Имя события отличается от остальных событий vg.sidebar.*.
    panel.addEventListener('hidePrevented.vg.sidebar', () => {
        document.querySelector('#sidebar-keyboard-status').textContent =
            'Escape заблокирован: ' + (++attempts);
    });
}

initSidebarDemo();

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Открытие по URL

data-hash="true" открывает панель по #id при загрузке документа. Открытие добавляет запись истории; Back закрывает панель.

После открытия скопируйте URL и перезагрузите страницу: панель откроется автоматически. Кнопка браузера «Назад» закрывает её.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-hash" aria-controls="sidebar-hash" aria-expanded="false">Открыть с URL-хэшем</button>
<p class="mt-3">После открытия скопируйте URL и перезагрузите страницу: панель откроется автоматически. Кнопка браузера «Назад» закрывает её.</p>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-hash" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-hash-title" data-hash="true">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-hash-title">Панель по ссылке</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-hash" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>URL содержит #sidebar-hash. При обычном закрытии модуль удаляет свой хэш, сохраняя путь и query-параметры.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-hash">Закрыть панель</button>
    </div>
</aside>

// Дополнительная инициализация не требуется: используется Data API.

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Дополнительная CSS-анимация

Зависимость animate.css импортируется в JavaScript примера. Переход положения из SCSS и CSS-анимация — разные механизмы; animation.delay здесь равен 500 мс.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-animation" aria-controls="sidebar-animation" aria-expanded="false">Открыть с анимацией</button>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-animation" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-animation-title" data-animation='{"enable":true,"in":"animate__fadeIn","out":"animate__fadeOut","delay":500}'>
    <div class="vg-sidebar-header">
        <h2 id="sidebar-animation-title">Animate.css</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-animation" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Для этого примера нужны стили animate.css. animation.delay задаёт задержку завершения закрытия, а не длительность CSS-анимации.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-animation">Закрыть панель</button>
    </div>
</aside>

/**
 * Описание: подключение CSS-анимаций для декларативного примера VGSidebar.
 * Возможности: Animate.css; параметры панели задаются через Data API.
 */
import 'animate.css';

function initSidebarDemo() {
    // Дополнительная инициализация не требуется: используется Data API.
}

initSidebarDemo();

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */