Элементы

Выдвижная панель

Панель у края окна: список, фильтры, действия. Тот же диалог, прижатый к правому, левому, верхнему или нижнему краю.

sheet с версии 0.1.0

Примеры

Панель справа — участники встречи

<button class="btn btn--ghost" type="button" data-ui-open="#sheet-people">Участники</button>
<dialog class="dialog sheet sheet--right" id="sheet-people" aria-labelledby="sheet-people-t" aria-describedby="sheet-people-d">
  <div class="dialog__head">
    <div>
      <h2 class="dialog__title" id="sheet-people-t">Участники</h2>
      <p class="dialog__desc" id="sheet-people-d">В комнате сейчас 3 человека.</p>
    </div>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">
    <ul class="sheet__list">
      <li class="sheet__row"><span>Анна Петрова</span><span class="sheet__meta">ведущий</span></li>
      <li class="sheet__row"><span>Игорь Соколов</span><span class="sheet__meta">микрофон выкл.</span></li>
      <li class="sheet__row"><span>Мария Орлова</span><span class="sheet__meta">демонстрация</span></li>
    </ul>
  </div>
  <div class="dialog__foot">
    <button class="btn btn--ghost" type="button" data-ui-close>Закрыть</button>
  </div>
</dialog>

Панель слева — фильтры записей

<button class="btn btn--ghost" type="button" data-ui-open="#sheet-filters">Фильтры</button>
<dialog class="dialog sheet sheet--left" id="sheet-filters" aria-labelledby="sheet-filters-t">
  <div class="dialog__head">
    <h2 class="dialog__title" id="sheet-filters-t">Фильтры записей</h2>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">
    <label class="field"><span class="field__label">Название</span><input class="field__input" type="text" id="sheet-filters-name"></label>
    <label class="field"><span class="field__label">Автор</span><input class="field__input" type="text" id="sheet-filters-author"></label>
  </div>
  <div class="dialog__foot">
    <button class="btn btn--ghost" type="button" data-ui-close>Сбросить</button>
    <button class="btn btn--primary" type="button" data-ui-close="apply">Применить</button>
  </div>
</dialog>

Панель снизу — действия на телефоне

<button class="btn btn--ghost" type="button" data-ui-open="#sheet-actions">Действия с записью</button>
<dialog class="dialog sheet sheet--bottom" id="sheet-actions" aria-labelledby="sheet-actions-t">
  <div class="dialog__head">
    <h2 class="dialog__title" id="sheet-actions-t">Запись от 12/10/2026 18:30</h2>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">
    <a class="btn btn--ghost btn--block" href="#">Скачать</a>
    <a class="btn btn--ghost btn--block" href="#">Поделиться ссылкой</a>
    <button class="btn btn--danger btn--block" type="button" data-ui-close="delete">Удалить</button>
  </div>
</dialog>

Установка

bukatchuk-ui add sheet

Вместе с компонентом установятся: tokens, fonts, base, core, button, field, dialog.

Файлы

Файл	Назначение
`sheet.css`	стили
`example.html`	образец разметки, в проект не копируется
`sheet.jekyll.html`	вставка для Jekyll
`sheet.jinja.html`	вставка для Jinja

Варианты

Класс	Назначение
`sheet--right`
`sheet--left`
`sheet--top`
`sheet--bottom`

Клавиши

Клавиша	Действие
`Esc`	закрыть
`Tab`	переход по элементам внутри панели

Вставка для Jekyll

{%- comment -%}
  Выдвижная панель. Параметры: id, title, desc, side (right | left | top | bottom), content (разметка тела).
  Открывается кнопкой с data-ui-open="#id". Требует компонент dialog.
{%- endcomment -%}
{%- assign side = include.side | default: 'right' -%}
<dialog class="dialog sheet sheet--{{ side }}" id="{{ include.id }}" aria-labelledby="{{ include.id }}-t"{% if include.desc %} aria-describedby="{{ include.id }}-d"{% endif %}>
  <div class="dialog__head">
    <div>
      <h2 class="dialog__title" id="{{ include.id }}-t">{{ include.title }}</h2>
      {%- if include.desc %}
      <p class="dialog__desc" id="{{ include.id }}-d">{{ include.desc }}</p>
      {%- endif %}
    </div>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">{{ include.content }}</div>
</dialog>

Макрос для Jinja

{#- Выдвижная панель. side: right | left | top | bottom. Тело — содержимое caller(); foot — готовая разметка нижней строки.
    Открывается кнопкой с data-ui-open="#id". Требует компонент dialog. -#}
{% macro sheet(id, title, desc=None, side='right', foot=None) -%}
<dialog class="dialog sheet sheet--{{ side }}" id="{{ id }}" aria-labelledby="{{ id }}-t"{% if desc %} aria-describedby="{{ id }}-d"{% endif %}>
  <div class="dialog__head">
    <div>
      <h2 class="dialog__title" id="{{ id }}-t">{{ title }}</h2>
      {%- if desc %}
      <p class="dialog__desc" id="{{ id }}-d">{{ desc }}</p>
      {%- endif %}
    </div>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">{{ caller() }}</div>
  {%- if foot %}
  <div class="dialog__foot">{{ foot|safe }}</div>
  {%- endif %}
</dialog>
{%- endmacro %}