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

HTML5 UI for LOB applications

<pip-tabs pip-tabs="tabs" pip-active-index="tabIndex"
          pip-show-tabs="selected.showTabs" pip-tabs-shadow="selected.showShadow" pip-tabs-select="onSelect"
          ng-disabled="selected.disabled">
</pip-tabs>

<div class="p24">
    <h2 class="text-title tm0 bm24">Tabs {{:: 'SAMPLE' | translate }}:</h2>

    <div ng-if="tabIndex === 0">
        <h3 class="text-subhead2">{{:: 'TABS_CONFIG_AND_INFO' | translate}}</h3>
        <p class="text-body1 tm16 bm16">{{ 'TAB_INDEX' | translate }}:<strong> {{ tabIndex }}</strong></p>

        <md-input-container class="w-stretch bm0">
            <label for="">{{ 'ADDING' | translate }}</label>
            <input type="number" ng-model="tabs[0].newCounts"/>
        </md-input-container>

        <md-switch ng-model="selected.showTabs">{{ 'VISIBLE' | translate }}</md-switch>
        <md-switch ng-model="selected.disabled">{{ 'DISABLED' | translate }}</md-switch>
        <md-switch ng-model="selected.showShadow">{{ 'SHADOW' | translate }}</md-switch>
    </div>

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

            &lt;<strong>pip-tabs</strong>  pip-tabs="tabs" pip-active-index="tabIndex"
                    pip-show-tabs="showTabs" pip-tabs-shadow="showShadow" pip-tabs-select="onSelect"
                    ng-disabled="disabled"&gt;
            &lt;/<strong>pip-tabs</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.tabs</strong> = [{
                        title: '{{ 'TABS_CONFIG_AND_INFO' | translate}}',
                        newCounts: 0
                    }, {title: '{{ 'CODE_SAMPLE' | translate}}',
                        newCounts: 0
                    }, {title: '{{ 'LIST_CHANGES' | translate}}',
                        newCounts: 0
                    }];
</pre>
    </div>

    <div ng-if="tabIndex === 2">
        <h3 class="text-subhead2">{{ 'LIST_CHANGES' | translate }}: </h3>
        <md-list class="pip-menu pip-ref-list w-stretch sample-list">
            <md-list-item class="pip-ref-list-item lp16 divider-bottom layout-row layout-align-start-start"
                          md-ink-ripple
                          ng-repeat="mes in messages">
                <img src="http://www.mattmcwilliams.com/wp-content/uploads/2012/09/changed.jpg"
                     class="pip-pic">
                <div class="pip-content">
                    <p class="pip-title"> {{ $index }}</p>
                    <p class="pip-text">{{ mes.text }}</p>
                </div>
            </md-list-item>
        </md-list>
    </div>

</div>