pip-webui/pip-webui-nav/samples/nav_controls/dropdown.html

HTML5 UI for LOB applications

<pip-dropdown pip-actions="actions" pip-active-index="activeIndex"></pip-dropdown>

<div class="p24">

    <div ng-if="activeIndex == 0">
        <h3 class="text-subhead2 tm0">{{ 'BASIC_INFO' | translate }}</h3>
        <div class="pip-ref-item">
            <img class="pip-pic" src="http://static.diary.ru/userdir/6/7/7/1/677144/47464972.jpg">
            <div class="pip-content">
                <p class="pip-title">Ali Connors</p>
                <p class="pip-subtitle">{{ 'MONTH_MAY' | translate }} 2016</p>
            </div>
        </div>
    </div>

    <div ng-if="activeIndex == 1">
        <h3 class="text-subhead2 tm0">{{ 'CONTACT_INFO' | translate }}</h3>
        <div class="pip-ref-item">
            <md-icon class="rm16" md-svg-icon="icons:phone"></md-icon>
            <div class="pip-content flex">
                <p class="pip-title">+ 79809887584</p>
                <p class="pip-subtitle">{{ 'MOBILE' | translate }}</p>
            </div>
        </div>
        <div class="pip-divider pip-fix-divider flex"></div>
        <div class="pip-ref-item">
            <md-icon class="rm16" md-svg-icon="icons:phones"></md-icon>
            <div class="pip-content flex">
                <p class="pip-title">+ 788907655443</p>
                <p class="pip-subtitle">{{ 'HOME' | translate }}</p>
            </div>
        </div>
    </div>

    <div ng-if="activeIndex == 2">
        <h3 class="text-subhead2 tm0">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
        <strong>HTML: </strong>

            &lt;<strong>pip-dropdown pip-actions="actions"</strong>
                        pip-active-index="activeIndex"&gt;
            &lt;/<strong>pip-dropdown</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.actions</strong> = [
                {title: '{{ 'BASIC_INFO' | translate }}', id: 1},
                {title: '{{ 'CONTACT_INFO' | translate }}', id: 2},
                {title: '{{ 'CODE_SAMPLE' | translate }}', id: 3}
            ];
</pre>
    </div>


</div>