oscript-ui
oscript-ui

Заголовок страницы

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

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

  • У экрана-списка или раздела настроек нужно название: «Управление проектами», «Внешние источники».
  • Под названием стоит одна фраза: что здесь делают или что здесь лежит.
  • Длинную страницу делят блоки, и у каждого свой заголовок второго уровня.

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

Заголовок страницы#

Строка вместо модели — это просто <h1>.

h1 страницы

Управление проектами

HTML = Набор.ЗаголовокСтраницы().Отрисовать("Управление проектами");

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

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

Внешние источники

Синхронизация чужих данных в это приложение

HTML = Кит.ЗаголовокСтраницы("Внешние источники") .Пояснение("Синхронизация чужих данных в это приложение").Рендер();

С пояснением#

Пояснение печатается приглушённым абзацем под заголовком. Пишите его одной фразой: что человек делает на этом экране.

h1 с пояснением

Внешние источники

Синхронизация чужих данных в это приложение

HTML = Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Пояснение", "Внешние источники", "Синхронизация чужих данных в это приложение"));

Пояснение со ссылкой или кодом передают полем ПояснениеHTML вместо Пояснение. Это доверенная разметка, и собирать её нужно компонентами кита.

Пояснение с разметкой

Ключи доступа

Ключ передают в заголовке Authorization.

HTML = Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, ПояснениеHTML", "Ключи доступа", "Ключ передают в заголовке <code>Authorization</code>."));

Заголовок блока#

Уровень 2 печатает <h2> — заголовок блока внутри страницы. Других уровней компонент не печатает: всё, кроме 2, становится 1.

h2 блока

Документы проекта

HTML = Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Уровень", "Документы проекта", 2));

Примечание отдельно#

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

Примечание отдельно

Ключ показывается один раз — сохраните его сразу.

HTML = Набор.ЗаголовокСтраницы().Примечание( "Ключ показывается один раз — сохраните его сразу.");

Гайдлайны#

Управление проектами

Открытые

Архив

ДелайтеОдин h1 на странице, блоки — h2
Код
HTML = Набор.ЗаголовокСтраницы().Отрисовать("Управление проектами")
	+ Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Уровень", "Открытые", 2))
	+ Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Уровень", "Архив", 2));

Управление проектами

Открытые

Архив

Не делайтеh1 у каждого блока: оглавление страницы плоское
Код
HTML = Набор.ЗаголовокСтраницы().Отрисовать("Управление проектами")
	+ Набор.ЗаголовокСтраницы().Отрисовать("Открытые")
	+ Набор.ЗаголовокСтраницы().Отрисовать("Архив");

Внешние источники

Синхронизация чужих данных в это приложение

ДелайтеПояснение добавляет то, чего нет в заголовке
Код
HTML = Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Пояснение",
	"Внешние источники", "Синхронизация чужих данных в это приложение"));

Внешние источники

На этой странице показаны внешние источники

Не делайтеПояснение повторяет заголовок
Код
HTML = Набор.ЗаголовокСтраницы().Отрисовать(Новый Структура("Заголовок, Пояснение",
	"Внешние источники", "На этой странице показаны внешние источники"));

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

  • Заголовок — настоящий <h1> или <h2>: по ним скринридер строит оглавление страницы и прыгает между блоками.
  • Пустой Заголовок кит не печатает и бросает исключение: пустой <h1> скринридер прочтёт как безымянный раздел.
  • Уровень выбирают по месту в оглавлении, а не по размеру шрифта. Не прыгайте с <h1> на <h3>.
  • Пояснение — обычный абзац после заголовка, его читают сразу за ним.

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

Заголовок узлом дерева

Управление проектами

Все проекты инсталляции

HTML = Кит.ЗаголовокСтраницы("Управление проектами") .Пояснение("Все проекты инсталляции").Рендер();

Заголовки любого уровня, с первого по шестой, на холсте даёт Кит.Заголовок(Уровень) — см. текст и значения.

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ЗаголовокСтраницы.

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

Отрисовывает заголовок страницы или блока с необязательным пояснением.

Параметры:
 Модель - Структура, Строка - текст заголовка либо структура: Заголовок (обязателен,
          экранируется), Уровень (1 либо 2), Пояснение (сырой текст, экранируется),
          ПояснениеHTML (ДОВЕРЕННАЯ разметка, задаётся вместо Пояснение).

Возвращаемое значение:
 Строка - HTML-фрагмент. Кидается исключением, если Заголовок пуст.

ЗаголовокСтраницы.Примечание()src/Классы/компоненты/ЗаголовокСтраницы.os

Отрисовывает абзац-пояснение «мелким шрифтом» без заголовка.

Параметры:
 Текст     - Строка - текст пояснения.
 Доверенно - Булево - (необязательный, по умолчанию Ложь) Истина: Текст — ДОВЕРЕННАЯ
             разметка, не экранировать.

Возвращаемое значение:
 Строка - <p class="muted">…</p> либо "" для пустого текста.

Кит.ЗаголовокСтраницы()src/Классы/холст/Кит.os

Заголовок страницы с пояснением под ним. Слова: Пояснение, Уровень.

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

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