Элементы

Блок значения

Блок с копируемым значением: ссылка, токен, пример запроса. Щелчок выделяет всё; кнопка копирует в буфер.

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

Примеры

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

https://meet.bukatchuk.ru/planerka

<p class="codebox">https://meet.bukatchuk.ru/planerka</p>
<button class="btn btn--sm btn--ghost" type="button" data-ui-copy="https://meet.bukatchuk.ru/planerka" data-ui-copied="Скопировано">Скопировать</button>

Мелкий шрифт

Authorization: Bearer meet_…

<pre class="codebox codebox--sm">Authorization: Bearer meet_…</pre>

Установка

bukatchuk-ui add codebox

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

Файлы

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

Варианты

Класс	Назначение
`codebox--sm`

Вставка для Jekyll

{%- comment -%} Блок значения. Параметры: text, small. {%- endcomment -%}
<p class="codebox{% if include.small %} codebox--sm{% endif %}">{{ include.text }}</p>

Макрос для Jinja

{#- Блок значения; copy=True добавляет кнопку «Скопировать». -#}
{% macro codebox(text, small=False, copy=False, label='Скопировать') -%}
<p class="codebox{% if small %} codebox--sm{% endif %}">{{ text }}</p>
{%- if copy %}
<button class="btn btn--sm btn--ghost" type="button" data-ui-copy="{{ text }}" data-ui-copied="Скопировано">{{ label }}</button>
{%- endif %}
{%- endmacro %}