Разделители и заголовки

Заголовок определяет название отдельной статьи, раздела, текстового блока, 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>