Элементы

Поиск

Строка поиска: поле и кнопка в одну линию.

search с версии 0.1.0

Примеры

Поиск по списку

<form class="search" method="get" action="#" role="search">
  <input class="field__input" type="search" name="q" value="" placeholder="Поиск по названию" aria-label="Поиск по названию">
  <button class="btn btn--ghost" type="submit">Найти</button>
</form>

Установка

bukatchuk-ui add search

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

Файлы

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

Вставка для Jekyll

{%- comment -%} Строка поиска. Параметры: action, placeholder, name. {%- endcomment -%}
<form class="search" method="get" action="{{ include.action }}" role="search">
  <input class="field__input" type="search" name="{{ include.name | default: 'q' }}" placeholder="{{ include.placeholder | default: 'Поиск' }}" aria-label="{{ include.placeholder | default: 'Поиск' }}">
  <button class="btn btn--ghost" type="submit">Найти</button>
</form>

Макрос для Jinja

{#- Строка поиска. -#}
{% macro search(action, value='', placeholder='Поиск', label=None, name='q') -%}
<form class="search" method="get" action="{{ action }}" role="search">
  <input class="field__input" type="search" name="{{ name }}" value="{{ value }}" placeholder="{{ placeholder }}" aria-label="{{ label or placeholder }}">
  <button class="btn btn--ghost" type="submit">Найти</button>
</form>
{%- endmacro %}