Элементы

Панель действий

Строка над списком: заголовок или фильтр слева, кнопки справа.

toolbar с версии 0.1.0

Примеры

Заголовок и действия

<div class="toolbar">
  <h2>Мои встречи</h2>
  <div class="toolbar__actions">
    <button class="btn btn--ghost" type="button">Мгновенная встреча</button>
    <a class="btn btn--primary" href="#">Новая встреча</a>
  </div>
</div>

Установка

bukatchuk-ui add toolbar

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

Файлы

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

Вставка для Jekyll

{%- comment -%} Панель действий. Параметры: title (слева), content — кнопки справа. {%- endcomment -%}
<div class="toolbar"><h2>{{ include.title }}</h2><div class="toolbar__actions">{{ include.content }}</div></div>

Макрос для Jinja

{#- Панель действий. left — текст или разметка слева; кнопки справа передаются блоком caller(). -#}
{% macro toolbar(left='') -%}
<div class="toolbar">{{ left }}<div class="toolbar__actions">{{ caller() }}</div></div>
{%- endmacro %}