bukatchuk ui

Элементы

Панель

Белая панель с толстой рамкой и жёсткой тенью: вход, форма, сообщение. Внутри — форма, пояснения, ошибка, ссылки.

panel с версии 0.1.0

Примеры

Вход

Вход в кабинет

Вас пригласили? Откройте ссылку из приглашения — вход не нужен.

<section class="panel">
  <form class="panel__form" method="post" action="#">
    <p class="eyebrow">Вход в кабинет</p>
    <p class="panel__error" role="alert">Неверный логин или пароль.</p>
    <label class="field"><span class="field__label">Логин или e-mail</span><input class="field__input" name="login" autocomplete="username"></label>
    <label class="field"><span class="field__label">Пароль</span><input class="field__input" type="password" name="password" autocomplete="current-password"></label>
    <div class="btns"><button class="btn btn--primary" type="submit">Войти</button></div>
    <p class="panel__links"><a href="#">Забыли пароль?</a><a href="#">Регистрация</a></p>
  </form>
  <p class="panel__hint">Вас пригласили? Откройте ссылку из приглашения — вход не нужен.</p>
</section>
Уже вошли

Вы вошли как Иванов Пётр.

Загрузка…

<section class="panel">
  <p class="panel__user">Вы вошли как <b>Иванов Пётр</b>.</p>
  <p class="panel__loading">Загрузка…</p>
</section>
Панель-форма
<form class="panel panel--form" method="post" action="#">
  <label class="field"><span class="field__label">Имя контакта</span><input class="field__input" name="name" value="Смирнова Анна"></label>
  <label class="field"><span class="field__label">E-mail</span><input class="field__input" type="email" name="email" value="smirnova@example.ru"></label>
  <div class="btns"><button class="btn btn--primary" type="submit">Сохранить</button></div>
</form>

Установка

bukatchuk-ui add panel

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

Файлы

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

Варианты

КлассНазначение
panel--form

Макрос для Jinja

{#- Панель; содержимое — блок caller(). form=True даёт спокойную панель для формы. -#}
{% macro panel(form=False) -%}
<section class="panel{% if form %} panel--form{% endif %}">{{ caller() }}</section>
{%- endmacro %}