Элементы

Клавиша

Обозначение клавиши и сочетания клавиш в тексте.

kbd с версии 0.1.0

Примеры

Клавиша

Нажмите Esc, чтобы закрыть окно, или Enter для подтверждения.

<p>Нажмите <kbd class="kbd">Esc</kbd>, чтобы закрыть окно, или <kbd class="kbd">Enter</kbd> для подтверждения.</p>

Сочетание

Выключить микрофон: Ctrl+D. Поднять руку: Alt+Shift+H.

<p>Выключить микрофон: <span class="kbd-group"><kbd class="kbd">Ctrl</kbd><span class="kbd-group__plus">+</span><kbd class="kbd">D</kbd></span>.
Поднять руку: <span class="kbd-group"><kbd class="kbd">Alt</kbd><span class="kbd-group__plus">+</span><kbd class="kbd">Shift</kbd><span class="kbd-group__plus">+</span><kbd class="kbd">H</kbd></span>.</p>

Установка

bukatchuk-ui add kbd

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

Файлы

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

Варианты

Класс	Назначение
`kbd--dark`

Вставка для Jekyll

{%- comment -%}
  Клавиша или сочетание. Параметр keys: клавиши через «+», например "Ctrl+K".
{%- endcomment -%}
{%- assign parts = include.keys | split: '+' -%}
<span class="kbd-group">{% for k in parts %}{% unless forloop.first %}<span class="kbd-group__plus">+</span>{% endunless %}<kbd class="kbd">{{ k | strip }}</kbd>{% endfor %}</span>

Макрос для Jinja

{#- Клавиша или сочетание: keys — клавиши через «+», например "Ctrl+K". -#}
{% macro kbd(keys) -%}
<span class="kbd-group">{% for k in keys.split('+') %}{% if not loop.first %}<span class="kbd-group__plus">+</span>{% endif %}<kbd class="kbd">{{ k|trim }}</kbd>{% endfor %}</span>
{%- endmacro %}