Разделители и заголовки
Заголовок определяет название отдельной статьи, раздела, текстового блока, web-страницы, окна и т.д.
Существует несколько вариантов отображения заголовков:
- простой заголовок
- заголовок со счетчиком
- заголовок с разделителем
- заголовок с разделителем-кнопкой
- сложные заголовки
Документация API Спецификация Axure
Простые заголовки
Простые заголовки Controls/heading:Title
используются для отображения названий статей, разделов, web-страниц, окон и т.д.
Заголовок, в нашем случае, поддерживает различные стили отображения и размеры. Может использоваться независимо или как часть сложных заголовков, состоящих из счетчика и разделителя.
Опция fontSize устанавливает размер заголовка.
<!-- WML -->
<Controls.heading:Title
caption="Как просто"
fontSize="4xl"/>
Опция fontColorStyle отвечает за визуальное отображение контрола. В данном контроле устанавливает цвет заголовка. Например, в теме online.sbis.ru используются синий и красный цвета.
<!-- WML -->
<Controls.heading:Title
caption="Как просто"
fontColorStyle="primary"
fontSize="4xl"/>
Опция textTransform позволяет преобразовать текст элемента в заглавные или прописные символы. В зависимости от размера шрифта меняется и межбуквенный интервал. Подробнее в стандарте на вкладке "Спецификация".
Крупные
Крупные заголовки, как правило, в рамках одной страницы используются однократно. Например, если на online.sbis.ru свернуть аккордеон, появится заголовок страницы, на которой вы находитесь.
Чтобы добавить крупный заголовок, в конфигурации контрола Controls/heading:Title
установите опцию fontSize в значение 5xl
.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Входящие"
readOnly="{{true}}"
fontColorStyle="primary"
fontSize="5xl"/>
С кликом
Для такого типа заголовка существует возможность перехода на другую страницу или в другой раздел при клике на заголовок. Для кликабельных заголовков реализована возможность смены цвета при наведении (ховер).
Чтобы добавить заголовок с кликом, в конфигурации контрола Controls/heading:Title
установите опцию readOnly в значение false
.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Документы"
readOnly="{{false}}"
fontColorStyle="primary"
fontSize="3xl"/>
Без клика
Заголовок такого типа не предназначен для перехода к другой странице или разделу. У заголовков без клика нет ховера (цвет заголовка при наведении не меняется). Чаще всего используются такие заголовки в качестве названий информационных блоков (новостей, статей и т.д.).
Чтобы добавить заголовок без клика, в конфигурации контрола Controls/heading:Title
установите опцию readOnly в значение true
.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Как работаем и отдыхаем в июле"
readOnly="{{true}}"
fontColorStyle="secondary"
fontSize="3xl"/>
Заголовки со счётчиками
Заголовки размеров L ,M и S можно использовать со счётчиками. Счетчики бывают трёх размеров — 18px (L), 16px (M), 14px (S). В теме online.sbis.ru используется два размера — 16px и 14px.
Подробнее о счетчиках в описании контрола Controls/heading:Counter.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Сотрудники"
fontColorStyle="primary"
fontSize="m"/>
<Controls.heading:Counter
caption="675"
fontColorStyle="secondary"
fontSize="m"/>
Заголовки с разделителем
Разделитель — это кнопка, используемая как часть сложных заголовков. Разделители-заголовки чаще всего используются на разводящих страницах для перехода с одной страницы на другую или между разделами.
Подробнее в описании контрола Controls/heading:Separator.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Компании"
style="primary"
size="l"/>
<Controls.heading:Separator />
Заголовки с разделителем-кнопкой
Кнопка-разделитель используется для того, чтобы скрывать или показывать контент. Кнопка-разделитель может являться частью сложных заголовков.
Для кнопок-разделителей предусмотрена опция bold (жирность кнопки). Подробнее читайте в описании контрола Controls/toggle:Separator.
Пример реализации в приложении:
<!-- WML -->
<Controls.heading:Title
caption="Heading"
fontColorStyle="primary"
fontSize="m"/>
<Controls.toggle:Separator
bold="{{false}}"
style="secondary"
value="{{false}}"
size="m"/>
Сложные заголовки
Заголовок может одновременно состоять из нескольких частей — самого заголовка, счетчика и разделителя. Сложные заголовки используются на разводящих страницах. Счетчик у таких заголовков необходим для указания количества событий или записей.
Пример реализации в приложении:
<!-- WML -->
<div>
<Controls.heading:Title
caption="Heading"
fontColorStyle="primary"
fontSize="l"/>
<Controls.heading:Counter
caption="12"
style="disabled"
size="m"/>
<Controls.heading:Separator
style="secondary"/>
</div>