VGSidebar

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

Разметка и расположение

Data API, четыре стороны экрана и размеры через CSS-переменные.

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

Карточка справа через Data API

Минимальная структура header / body / footer, кнопка открытия и два dismiss-элемента. Повторный клик на триггере переключает тот же экземпляр.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-basic" aria-controls="sidebar-basic" aria-expanded="false">Открыть карточку</button>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-basic" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-basic-title">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-basic-title">Карточка проекта</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-basic" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><div class="sidebar-demo-card"><p>Проект VGApp</p><p>Базовая панель справа: фон затемняется, прокрутка страницы блокируется.</p><p>Закрытие — по Escape, подложке или кнопке.</p></div></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-basic">Закрыть панель</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. */

Слева, сверху и снизу

Классы left / right / top / bottom задают сторону. Горизонтальные панели занимают всю высоту, вертикальные — всю ширину. Длинный body прокручивается внутри панели.

<div class="sidebar-demo-actions">
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-left" aria-controls="sidebar-left" aria-expanded="false">Слева</button>
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-top" aria-controls="sidebar-top" aria-expanded="false">Сверху</button>
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-bottom" aria-controls="sidebar-bottom" aria-expanded="false">Снизу</button>
</div>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-left" class="vg-sidebar left sidebar-demo-panel" aria-labelledby="sidebar-left-title">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-left-title">Слева</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-left" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Расположение задаёт класс left. Размеры меняются через публичные --vg-sidebar-horizontal-* и --vg-sidebar-vertical-*.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-left">Закрыть панель</button>
    </div>
</aside>
<aside id="sidebar-top" class="vg-sidebar top sidebar-demo-panel" aria-labelledby="sidebar-top-title">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-top-title">Сверху</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-top" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Расположение задаёт класс top. Размеры меняются через публичные --vg-sidebar-horizontal-* и --vg-sidebar-vertical-*.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-top">Закрыть панель</button>
    </div>
</aside>
<aside id="sidebar-bottom" class="vg-sidebar bottom sidebar-demo-panel" aria-labelledby="sidebar-bottom-title">
    <div class="vg-sidebar-header">
        <h2 id="sidebar-bottom-title">Снизу</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-bottom" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><p>Расположение задаёт класс bottom. Размеры меняются через публичные --vg-sidebar-horizontal-* и --vg-sidebar-vertical-*.</p></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-bottom">Закрыть панель</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. */

Подключение

JavaScript: import { VGSidebar } from 'vgapp';. Стили: vgapp/sidebar или общий vgapp/scss. Импорт модуля подключает делегированный Data API; вызов init() не нужен.

Для триггера используйте data-vg-toggle="sidebar" и data-vg-target="#id" (или href у ссылки). Для закрытия — data-vg-dismiss="sidebar" с явной целью. Не смешивайте эти атрибуты с Data API бокового меню OKAUX.