Панель сохранения

Панель сохранения — полоса внизу формы с кнопкой «Сохранить», а при нужде и с «Отменить» и строкой пояснения слева. Она прилипает к нижнему краю окна, пока форма на экране, поэтому сохранить длинную секцию настроек можно, не прокручивая её до конца. Прилипшая панель поднимается тенью над прокручиваемой формой; на своём месте в конце формы она лежит ровно, без тени.

Когда использовать#

Форма длинная, и кнопка сохранения в самом низу ушла бы за край экрана.
Секция дома настроек отправляет свою форму: там панель печатает сам каркас.
Правку можно отменить возвратом на страницу секции, и это нужно показать рядом с сохранением.

Не берите панель для короткой формы из двух полей — там хватит кнопки под полями. Необратимое действие с подтверждением — это опасная зона, а не панель с красной кнопкой.

Сохранение#

Основная кнопка с дискетой отправляет форму, в которой стоит панель. АдресОтмены добавляет перед ней вторичную ссылку-кнопку «Отменить», а Пояснение — приглушённую строку слева.

Сохранение с отменой и пояснением

Есть несохранённые изменения

Отменить

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Пояснение, АдресОтмены",
		"Сохранить", "Есть несохранённые изменения", "/настройки"));

В дереве холста панель собирается словами: подпись кнопки позицией, остальное — словами (см. Язык узлов).

Узлом холста — словами

Есть несохранённые изменения

Отменить

HTML = Кит.ПанельСохранения("Сохранить")
	.Пояснение("Есть несохранённые изменения").АдресОтмены("/настройки").Рендер();

Без модели панель печатает одну кнопку «Сохранить».

Панель без модели

HTML = Набор.ПанельСохранения().Отрисовать();

Панель работает без скрипта: кнопка — submit внутри формы, липкость даёт лист. Это поверхность Material со скруглением large. Тень уровня 2 она получает, только когда прилипла к низу экрана и под ней прокручивается форма, — это знает скрипт. Без скрипта панель всегда обведена кольцом outline-variant: прилипшая отделена от полей под ней краем, а не сливается с карточкой.

Со скриптом кита панель подсвечивается цветом secondary container на первом же вводе в её форму: так видно, что есть несохранённые правки. Подсветку снимает ответ сервера. Если форма собрана с БезПерезагрузки(), сохранение проходит без перезагрузки страницы, см. Формы деревом.

Опасное действие#

Опасное перекрашивает кнопку в цвет ошибки и меняет дискету на корзину. Так выглядит панель секции, чьё действие разрушает данные.

Опасное действие

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Опасное", "Удалить проект", Истина));

Опасная панель не спрашивает подтверждения. Если действие необратимо, положите в ту же форму опасную зону с полем подтверждения.

Своя иконка#

Не всякое действие секции — сохранение, и дискета на «Доверить конвейеру» читается неверно. Иконку называет секция полем Иконка.

Иконка под действие

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Иконка", "Доверить конвейеру", "ключ"));

Заблокирована#

Заблокированная кнопка остаётся на месте и не отвечает: например, у человека нет прав на правку секции. Решает это сервер при печати страницы — скрипта, который включит кнопку после первой правки, в ките нет.

Заблокирована

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Заблокирована", "Сохранить", Истина));

Какая кнопка нажата#

Имя и Значение печатаются атрибутами name и value кнопки. Форма, в которой две кнопки отправки, по ним узнаёт, какую нажали.

Кнопка с именем и значением

Отменить

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Имя, Значение, АдресОтмены",
		"Сохранить черновик", "действие", "черновик", "/статьи"));

Гайдлайны#

ДелайтеРазрушающее действие — опасной панелью с корзиной

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Опасное", "Удалить проект", Истина));

Не делайтеУдаление синей кнопкой с дискетой: выглядит как сохранение

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись", "Удалить проект"));

ДелайтеИконка повторяет действие

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Иконка", "Доверить конвейеру", "ключ"));

Не делайтеДискета на действии, которое не сохраняет

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись", "Доверить конвейеру"));

Изменены 2 поля

Отменить

ДелайтеПояснение говорит, что будет сохранено или что мешает

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Пояснение, АдресОтмены",
		"Сохранить", "Изменены 2 поля", "/настройки"));

Нажмите «Сохранить», чтобы сохранить

Не делайтеПояснение повторяет кнопку

Код

HTML = Набор.ПанельСохранения().Отрисовать(
	Новый Структура("Подпись, Пояснение",
		"Сохранить", "Нажмите «Сохранить», чтобы сохранить"));

Доступность#

Кнопки панели — кнопки кита: подпись, иконка как украшение, фокус виден.
«Отменить» — ссылка-кнопка: она уводит на адрес секции, а не сбрасывает поля скриптом, поэтому работает и без него.
Пояснение — обычный текст рядом с кнопками. Со скринридером его слышно только при чтении подряд, поэтому то, без чего нельзя нажать «Сохранить», пишите и у самих полей.
Липкая панель закрывает низ окна только на время прокрутки: в конце формы она встаёт на своё место после полей и ничего не прячет. Но поле, на которое ушёл фокус с клавиатуры, может оказаться под ней: прокручивая к полю, браузер липкую полосу не учитывает. В длинной форме задайте своим листом scroll-padding-bottom на высоту панели.

Узлом холста#

На холсте панель — узел рода «панель». Кладите её последним ребёнком формы.

Панель узлом дерева

HTML = Кит.ПанельСохранения("Сохранить").Рендер();

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ПанельСохранения, а Имя и Значение — одно слово Имя(Имя, Значение).

ПанельСохранения.Отрисовать()src/Классы/компоненты/ПанельСохранения.os

Отрисовывает панель сохранения секции настроек.

Параметры:
 Модель - Структура - (необязательный, по умолчанию Неопределено) Подпись
          ("Сохранить"), Пояснение (текст слева от кнопок), АдресОтмены (пусто —
          кнопки отмены нет), ПодписьОтмены ("Отменить"), Заблокирована, Опасное,
          Иконка (пусто — «сохранить», у опасной секции «корзина»), Имя и Значение
          (name/value кнопки: форма с двумя кнопками отличает нажатую).

Возвращаемое значение:
 Строка - фрагмент <div class="savebar">.

Кит.ПанельСохранения()src/Классы/холст/Кит.os

Панель сохранения — липкая полоса с кнопкой «Сохранить». Слова: Пояснение, АдресОтмены,
Опасное, Иконка, Заблокирована, Имя(Имя, Значение).

Параметры:
 Модель - Строка, Структура - (необязательный) подпись кнопки; Структура — прежний вид
          модели.

Возвращаемое значение:
 ЭлементЭкрана