bukatchuk ui

Блоки

Каркас страницы сервиса

Область содержимого страницы сервиса: колонка нужной ширины, заголовок, вводный абзац, ссылка «назад».

page с версии 0.1.0

Примеры

Страница кабинета
<main class="page"><div class="page__in">
  <p class="page__back"><a href="#">← К списку встреч</a></p>
  <h1 class="page__h">Новая встреча</h1>
  <p class="page__lead">Укажите название и время. Ссылку для гостей можно отправить сразу после создания.</p>
</div></main>
Узкая колонка
<main class="page"><div class="page__in page__in--narrow">
  <h1 class="page__h">Смена пароля</h1>
  <p class="page__lead">Новый пароль должен быть не короче двенадцати символов.</p>
</div></main>

Установка

bukatchuk-ui add page

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

Файлы

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

Варианты

КлассНазначение
page__in--narrow

Макрос для Jinja

{#- Каркас страницы сервиса; содержимое — блок caller(). -#}
{% macro page(title=None, lead=None, back=None, back_text='← Назад', narrow=False) -%}
<main class="page"><div class="page__in{% if narrow %} page__in--narrow{% endif %}">
  {%- if back %}
  <p class="page__back"><a href="{{ back }}">{{ back_text }}</a></p>
  {%- endif %}
  {%- if title %}
  <h1 class="page__h">{{ title }}</h1>
  {%- endif %}
  {%- if lead %}
  <p class="page__lead">{{ lead }}</p>
  {%- endif %}
  {{ caller() if caller else '' }}
</div></main>
{%- endmacro %}