Элементы
Панель
Белая панель с толстой рамкой и жёсткой тенью: вход, форма, сообщение. Внутри — форма, пояснения, ошибка, ссылки.
Примеры
Вход
Вас пригласили? Откройте ссылку из приглашения — вход не нужен.
<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
Файлы
| Файл | Назначение |
|---|---|
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 %}