Проводник

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

• Задача складывается из нескольких шагов, и человеку важно видеть, сколько осталось.
• Шаги делаются на разных страницах, а проводник собирает их в одном месте — в кабинете, на пустом экране нового проекта.
• Выполнен ли шаг, знает сервер: компонент только показывает то, что посчитала доменная служба.

Не берите проводник для соседних видов одного объекта — им место во вкладках. Одно действие на пустом экране — это пустое состояние с кнопкой, а не проводник из одного шага.

Шаги и прогресс#

Шаг — карточка Material с обводкой. Пройденный шаг узнаётся значком цвета primary, текущий — обводкой primary и лёгкой заливкой. У текущего шага есть ход к делу: Адрес и ПодписьСсылки печатают ссылку под заголовком.

В дереве холста у проводника слов нет: шаги приходят прежним списком структур, а сам узел кладут ребёнком, как любой другой (см. Язык узлов).

Прогресс «Пройдено N из M» компонент считает сам по полю Выполнен. Шаг, отмеченный и выполненным, и текущим, считается выполненным: текущим бывает только то, что ещё не сделано.

Тело шага#

Под заголовком шага можно положить свою разметку — ТелоHTML: команду для терминала, короткий список, форму из одной кнопки. Разметка вставляется как есть, поэтому кладите туда только то, что собрал сам код, а не ввод пользователя.

Пустой список#

Шагов нет — компонент печатает приглушённую строку из поля Пусто. Без него не печатается ничего.

Гайдлайны#

Шаги = Новый Массив();
Шаги.Добавить(Новый Структура("Заголовок, Выполнен", "Создать учётную запись", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий, Адрес, ПодписьСсылки",
	"Выпустить ключ доступа", Истина, "/кабинет/ключи", "Мои ключи"));
Шаги.Добавить(Новый Структура("Заголовок", "Создать первый документ"));
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

Шаги = Новый Массив();
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Создать учётную запись", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Выпустить ключ доступа", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Создать первый документ", Истина));
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

Шаги = Новый Массив();
Шаги.Добавить(Новый Структура("Заголовок, Выполнен", "Подключить репозиторий", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Настроить сборку", Истина));
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

Шаги = Новый Массив();
Шаги.Добавить(Новый Структура("Заголовок, Выполнен", "Репозиторий", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Сборка", Истина));
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

Шаги = Новый Массив();
Шаги.Добавить(Новый Структура("Заголовок, Выполнен", "Создать проект", Истина));
Шаги.Добавить(Новый Структура("Заголовок, Текущий", "Пригласить команду", Истина));
Шаги.Добавить(Новый Структура("Заголовок", "Выпустить первую версию"));
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

Шаги = Новый Массив();
Для Каждого Заголовок Из СтрРазделить("Открыть настройки,Найти раздел «Доступ»,Нажать «Добавить»,"
	+ "Ввести почту,Выбрать роль,Нажать «Пригласить»,Дождаться письма,Проверить список", ",") Цикл
	Шаги.Добавить(Новый Структура("Заголовок, Выполнен", Заголовок, Заголовок = "Открыть настройки"));
КонецЦикла;
HTML = Набор.Проводник().Отрисовать(Новый Структура("Шаги", Шаги));

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

• Шаги — нумерованный список <ol>: скринридер называет число шагов и номер каждого.
• Прогресс напечатан текстом «Пройдено 1 из 3», а не только галочками и цветом.
• Значок шага декоративен (aria-hidden), поэтому состояние шага, которое важно услышать, называйте и словами — в пояснении («Готово», «Ждёт подтверждения»).
• Ход к делу — обычная ссылка с подписью. Подпись по умолчанию «Перейти» ничего не называет: задавайте ПодписьСсылки.

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

На холсте проводник — узел рода «шаги».

Модель#

Структура ниже — модель и для набора, и для Кит.Проводник: шаги и заглушку Пусто словами не задают.

Отрисовывает строку прогресса и список шагов.

Параметры:
 Модель - Структура - Пусто (текст, когда шагов нет), Шаги (массив структур:
          Заголовок, Пояснение, Выполнен, Текущий, Адрес, ПодписьСсылки,
          ТелоHTML — ДОВЕРЕННЫЙ HTML под шагом).

Возвращаемое значение:
 Строка - прогресс и <ol class="guide__list"> либо заглушка пустого списка.

Список шагов многошаговой задачи.

Параметры:
 Модель - Структура - модель компонента «Проводник».

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