Элементы

Всплывающая панель

Панель у кнопки с короткой формой или пояснением. Закрывается по Esc и щелчку вне, фокус возвращается на кнопку.

popover с версии 0.1.0 со скриптом

Примеры

Ссылка на встречу

<button class="btn btn--ghost" type="button" data-ui-popover="#pop-link" aria-haspopup="dialog" aria-expanded="false">Поделиться</button>
<div class="popover" id="pop-link" hidden aria-label="Ссылка на встречу">
  <h3 class="popover__title">Ссылка на встречу</h3>
  <div class="popover__body">
    <label class="field"><span class="field__label">Адрес</span><input class="field__input" type="text" id="pop-link-url" value="https://meet.bukatchuk.ru/standup" readonly></label>
    <p class="popover__text">Доступ по ссылке есть у всех, кому она отправлена.</p>
  </div>
  <div class="popover__foot">
    <button class="btn btn--ghost btn--sm" type="button" data-ui-close>Закрыть</button>
    <button class="btn btn--primary btn--sm" type="button" data-ui-close>Копировать</button>
  </div>
</div>

Пояснение к параметру

<button class="btn btn--ghost btn--sm" type="button" data-ui-popover="#pop-lobby" aria-expanded="false">Зал ожидания</button>
<div class="popover" id="pop-lobby" hidden aria-label="О зале ожидания">
  <h3 class="popover__title">Зал ожидания</h3>
  <p class="popover__text">Участники попадают на встречу после подтверждения ведущего. Включение действует только для новых подключений.</p>
</div>

Смена статуса поста

<button class="btn btn--ghost" type="button" data-ui-popover="#pop-status" aria-haspopup="dialog" aria-expanded="false">Статус: черновик</button>
<div class="popover popover--wide" id="pop-status" hidden aria-label="Статус публикации">
  <h3 class="popover__title">Публикация</h3>
  <div class="popover__body">
    <label class="field"><span class="field__label">Дата выхода</span><input class="field__input" type="text" id="pop-status-date" value="14/10/2026 10:00"></label>
  </div>
  <div class="popover__foot">
    <button class="btn btn--primary btn--sm" type="button" data-ui-close>Запланировать</button>
  </div>
</div>

Установка

bukatchuk-ui add popover

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

Файлы

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

Варианты

Класс	Назначение
`popover--wide`

Клавиши

Клавиша	Действие
`Enter / Space`	открыть и закрыть панель на кнопке
`Esc`	закрыть, фокус на кнопку
`Tab`	переход внутри панели; уход фокуса за панель закрывает её

Вставка для Jekyll

{%- comment -%}
  Всплывающая панель у кнопки. Параметры: id, label (текст кнопки), title, content (разметка тела), variant (ghost | primary).
{%- endcomment -%}
<button class="btn btn--{{ include.variant | default: 'ghost' }}" type="button" data-ui-popover="#{{ include.id }}" aria-haspopup="dialog" aria-expanded="false">{{ include.label }}</button>
<div class="popover" id="{{ include.id }}" hidden aria-label="{{ include.title | default: include.label }}">
  {%- if include.title %}
  <h3 class="popover__title">{{ include.title }}</h3>
  {%- endif %}
  <div class="popover__body">{{ include.content }}</div>
</div>

Макрос для Jinja

{#- Всплывающая панель у кнопки. Тело — caller(). Кнопка и панель выводятся парой; panel_id — id панели. -#}
{% macro popover(id, label, title=None, variant='ghost', wide=False) -%}
<button class="btn btn--{{ variant }}" type="button" data-ui-popover="#{{ id }}" aria-haspopup="dialog" aria-expanded="false">{{ label }}</button>
<div class="popover{% if wide %} popover--wide{% endif %}" id="{{ id }}" hidden aria-label="{{ title or label }}">
  {%- if title %}
  <h3 class="popover__title">{{ title }}</h3>
  {%- endif %}
  <div class="popover__body">{{ caller() }}</div>
</div>
{%- endmacro %}