Default

Header component

HTML

<div ng-controller="headerExampleController">
    <inv-header applications="apps"
        application-selected="onApplicationSelected"
        current-application="currentApp"
        business-units="businessUnits"
        current-business-unit="currentBusinessUnit"
        business-unit-selected="onItemSelect"
        enable-preference-option="true"
        enable-extract-validation-override-option="false">
    </inv-header>
</div>

Preference Option hidden

Header component with preference option hidden.

HTML

<div ng-controller="headerExampleController">
    <inv-header
        applications="apps"
        application-selected="onApplicationSelected"
        current-application="currentApp"
        business-units="businessUnits"
        current-business-unit="currentBusinessUnit"
        business-unit-selected="onItemSelect"
        enable-preference-option="false">
    </inv-header>
</div>

Override Validation Option hidden

Header component with override validation option hidden.

HTML

<div ng-controller="headerExampleController">
    <inv-header
        applications="apps"
        application-selected="onApplicationSelected"
        current-application="currentApp"
        business-units="businessUnits"
        current-business-unit="currentBusinessUnit"
        business-unit-selected="onItemSelect"
        enable-preference-option="true"
        enable-extract-validation-override-option="false">
    </inv-header>
</div>

User Menu

User menu basic popout within the header.

Invision Studio

HTML

<div ng-controller="headerExampleController">
    <div class="t-header c-header">
        <div class="c-header-section c-header-menu c-header-logo">
            <a href="#" class="c-button c-button--icon c-button--menu">
                <inv-icon glyph="'user'"></inv-icon>
            </a>
        </div>
        <div class="c-header-title">
            Invision<span class="c-header-appName"> Studio</span>
        </div>
        <div class="c-divider"></div>
        <div ng-class="{'c-header-menu':businessUnits.length > 1}">
            <inv-business-unit-select
                    business-units="businessUnits"
                    name="name"
                    logo-url="logoUrl"
                    on-business-unit-selected="onItemSelect">
            </inv-business-unit-select>
        </div>
        <div class="c-divider"></div>
        <div class="c-header-filler"></div>
        <div class="c-divider"></div>

        <div ng-controller="invUserMenuExampleController">
            <inv-user-menu
                menu-options="menuOptions">
            </inv-user-menu>
        </div>

        <div class="c-divider"></div>
        <div class="c-button c-button--icon c-header-section">
            <inv-icon glyph="'question_mark'"></inv-icon>
        </div>
        <div class="c-divider"></div>
        <div class="c-button c-button--icon c-header-section">
            <inv-icon glyph="'search'"></inv-icon>
        </div>
    </div>
</div>

Wrapup Validation Option

Header component with optional wrapup validation function.

HTML

<div ng-controller="headerExampleController">
    <inv-header applications="apps"
        application-selected="onApplicationSelected"
        current-application="currentApp"
        business-units="businessUnits"
        current-business-unit="currentBusinessUnit"
        business-unit-selected="onItemSelect"
        wrapup-validation="bypassCustomerWrapup">
    </inv-header>
</div>