Шаблоны отображения центральной части графической шапки
Для удобства построения графической шапки разработаны готовые раскладки для шаблона центральной части графической шапки bodyContentTemplate:
- Headers/graphic:ContentPanel - Панель раскладки контента в центральной части графической шапки;
- Headers/graphic:ExtendedContentPanel - Расширенная панель раскладки контента в центральной части графической шапки.
Стандартная панель раскладки
Стандартная панель раскладки реализована в классе Headers/graphic:ContentPanel. Позволяет задать контент в 1-3 строки. Обязательным элементом является только заголовок. Остальные элементы (логотип, вкладки и проч.) добавляются при необходимости.
Настройка заголовка
В опцию mainText передайте заголовок, который будет отображаться в графической шапке.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ContentPanel
mainText="Английский язык"/>
</bodyContentTemplate>
</Headers.graphic:Header>
Для отключения отображения уменьшенного размера заголовка при изменении фиксации графической шапки передайте в опцию mainTextAnimated значение false.
Хлебные крошки
Для отображения хлебных крошек в графической шапке, передайте в опции:
- breadcrumbsItems- массив хлебных крошек,
- breadcrumbsContainerWidth - ширину контейнера крошек.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ContentPanel
mainText="Английский язык"
breadcrumbsItems="{{_breadcrumbsItems}}"
breadcrumbsContainerWidth="300"/>
</bodyContentTemplate>
</Headers.graphic:Header>
Логотип
Для отображения логотипа в шапке, задайте одну из опций:
- logo - конфигурация для отображения логотипа,
- logoTemplate - шаблон логотипа.
По умолчанию на панели раскладки отображается контейнер, в который можно передать логотип. Чтобы его отключить, передайте в функцию logoVisible значение false.
Ширина области тулбара
Для корректного отображения заголовка при зафиксированном тулбаре, необходимо передать в опцию rightContentWidth ширину контейнера тулбара.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ContentPanel
mainText="{{_testText}}"
rightContentWidth="{{_toolbarContentWidth}}"/>
</bodyContentTemplate>
</Headers.graphic:Header>
Вкладки
Для отображения вкладок в графической шапке, передайте набор записей для вкладок в опцию tabItems.
Пользовательский шаблон отображения вкладок настраивается в опции tabTemplate.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ContentPanel
bind:mainText="_mainText"
additionalText="Программа ускоренного курса"
tabItems="{{_tabItems}}"
bind:tabSelectedKey="_tabSelectedKey"
logo="{{_logo}}">
<ws:tabTemplate>
<div class="Engine-demo__TabTemplate__customTab">
<ws:partial
template="Controls/tabs:buttonsItemTemplate"
item="{{tabTemplate.item}}"
displayProperty="title"/>
<div if="{{tabTemplate.item.isStar}}"
class="icon-Favorite controls-icon_size-s">
</div>
</div>
</ws:tabTemplate>
</bodyContentTemplate>
</Headers.graphic:Header>
Расширенная панель раскладки
Расширенная панель раскладки реализована в классе Headers/graphic:ExtendedContentPanel. Расширенная панель раскладки используется для представления личной информации и позволяет размещать дополнительный контент сверху и справа от заголовка. Хлебные крошки, вкладки и логотип настраиваются аналогично стандартной раскладки панели.
Настройка заголовка
Заголовок содержит персональные данные - фамилию, имя и отчество, которые передаются в опцию inputNameOptions.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ExtendedContentPanel
inputNameOptions="{{_inputNameOptions}}"/>
</bodyContentTemplate>
</Headers.graphic:Header>
Дополнительный текст, отображаемый справа от заголовка задается в опции additionMainText.
Панель редактирования логотипа
По умолчанию при наведении на логотип отображается панель редактироания. Для отключения этой опции передайте в опцию logoEditPanelVisibility значение hidden. Шаблон, отображаемый в панели редактирования логотипа, настраивается в опции logoEditPanelTemplate.
Контентная область справа от заголовка
Шаблон, отображаемый справа от заголовка, задается в опции middleRightTemplate.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ExtendedContentPanel
inputNameOptions="{{_inputNameOptions}}">
<ws:middleRightTemplate>
<Controls.input:Label
attr:class="engine-demo-Graphic__topRightLabel"
caption="Работает 13 лет 8 месяцев"
fontSize="l"
underline="hovered"/>
</ws:middleRightTemplate>
</Headers.graphic:ExtendedContentPanel>
</bodyContentTemplate>
</Headers.graphic:Header>
Контентная область над заголовком
Шаблон, отображаемый по центру в режиме редактирования, задается в опции middleEditTemplate.
<Headers.graphic:Header
mode="{{ _mode }}">
<bodyContentTemplate>
<Headers.graphic:ExtendedContentPanel
inputNameOptions="{{_inputNameOptions}}">
<ws:middleEditTemplate>
<div class="engine-demo-Graphic__middleEditTextWrapper2">
<Controls.input:Text
value="Менеджер по продажам"
fontSize="m"/>
</div>
</ws:middleEditTemplate>
</Headers.graphic:ExtendedContentPanel>
</bodyContentTemplate>
</Headers.graphic:Header>