Блоки

Лента метрик

Ряд ячеек с числом, подписью и полосой заполнения под первым экраном лендинга.

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

Примеры

Лента метрик курса

<div class="metrics">
  <div class="metrics__cell">
    <div class="metrics__label">Блоков</div>
    <div class="metrics__value">22</div>
    <div class="metrics__bar"><div class="metrics__fill" data-ui-fill="100%"></div></div>
  </div>
  <div class="metrics__cell">
    <div class="metrics__label">Уроков</div>
    <div class="metrics__value">216</div>
    <div class="metrics__bar"><div class="metrics__fill" data-ui-fill="100%"></div></div>
  </div>
  <div class="metrics__cell">
    <div class="metrics__label">Базы до контейнера</div>
    <div class="metrics__value">68<span class="metrics__unit">уроков</span></div>
    <div class="metrics__bar"><div class="metrics__fill" data-ui-fill="31%"></div></div>
  </div>
  <div class="metrics__cell">
    <div class="metrics__label">Ваш риск</div>
    <div class="metrics__value">1<span class="metrics__unit">месяц</span></div>
    <div class="metrics__bar"><div class="metrics__fill" data-ui-fill="8%"></div></div>
  </div>
</div>

Установка

bukatchuk-ui add metrics

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

Файлы

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

Переменные

Переменная	Что задаёт
`--sec-y`	вертикальный отступ секций из профиля: высота ячейки считается от него

Вставка для Jekyll

{%- comment -%}
  Лента метрик. Параметр: items — список с полями label, value, unit (необязательно), fill (доля полосы, например "31%").
  Пример: {% include ui/metrics.html items=site.data.ribbon.items %}
{%- endcomment -%}
<div class="metrics">
  {%- for i in include.items %}
  <div class="metrics__cell">
    <div class="metrics__label">{{ i.label }}</div>
    <div class="metrics__value">{{ i.value }}{% if i.unit %}<span class="metrics__unit">{{ i.unit }}</span>{% endif %}</div>
    <div class="metrics__bar"><div class="metrics__fill" data-ui-fill="{{ i.fill }}"></div></div>
  </div>
  {%- endfor %}
</div>