Блоки

Бегущая строка

Строка с темами, которая бесконечно прокручивается; чёрная или оранжевая, в любую сторону.

Примеры

<div class="ticker ticker--safety" aria-label="Темы курса">
  <div class="ticker__track"><a class="ticker__item" href="#">Linux и сети</a><a class="ticker__item" href="#">Контейнеры</a><a class="ticker__item" href="#">Наблюдаемость</a><a class="ticker__item" href="#">Базы данных</a><span class="ticker__dup" aria-hidden="true"><a class="ticker__item" href="#">Linux и сети</a><a class="ticker__item" href="#">Контейнеры</a><a class="ticker__item" href="#">Наблюдаемость</a><a class="ticker__item" href="#">Базы данных</a></span></div>
</div>

<div class="ticker ticker--reverse" aria-label="Темы курса">
  <div class="ticker__track"><a class="ticker__item" href="#">Отказоустойчивость</a><a class="ticker__item" href="#">Разбор аварий</a><a class="ticker__item" href="#">Автоматизация</a><span class="ticker__dup" aria-hidden="true"><a class="ticker__item" href="#">Отказоустойчивость</a><a class="ticker__item" href="#">Разбор аварий</a><a class="ticker__item" href="#">Автоматизация</a></span></div>
</div>

Установка

bukatchuk-ui add ticker

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Бегущая строка с темами. Параметры: items (список строк), from (с какой начать, по умолчанию 0),
  count (сколько взять), mod (ticker--safety | ticker--reverse), url (базовый адрес; пункт n ведёт на
  url#block-NN), label (подпись для скринридера). Список выводится дважды: так прокрутка замыкается без шва.
{%- endcomment -%}
{%- assign from = include.from | default: 0 -%}
{%- capture ticker_items -%}
{%- for t in include.items limit: include.count offset: from -%}
{%- assign n = forloop.index | plus: from -%}
<a class="ticker__item" href="{{ include.url }}#block-{% if n < 10 %}0{% endif %}{{ n }}"{% if include.external %} target="_blank" rel="noopener"{% endif %}>{{ t }}</a>
{%- endfor -%}
{%- endcapture -%}
<div class="ticker {{ include.mod }}" aria-label="{{ include.label | default: 'Темы' }}">
  <div class="ticker__track">{{ ticker_items }}<span class="ticker__dup" aria-hidden="true">{{ ticker_items }}</span></div>
</div>