Шаблоны отображения центральной части графической шапки

Для удобства построения графической шапки разработаны готовые раскладки для шаблона центральной части графической шапки 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>