angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
52 lines (50 loc) • 1.76 kB
HTML
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
<md-tab id="tab1">
<md-tab-label>Item One</md-tab-label>
<md-tab-body>
View for Item #1 <br/>
data.selectedIndex = 0;
</md-tab-body>
</md-tab>
<md-tab id="tab2" ng-disabled="data.secondLocked">
<md-tab-label>{{data.secondLabel}}</md-tab-label>
<md-tab-body>
View for Item #2 <br/>
data.selectedIndex = 1;
</md-tab-body>
</md-tab>
<md-tab id="tab3">
<md-tab-label>Item Three</md-tab-label>
<md-tab-body>
View for Item #3 <br/>
data.selectedIndex = 2;
</md-tab-body>
</md-tab>
<md-tab id="tab4">
<md-tab-label><md-icon md-svg-icon="communication:phone"></md-icon></md-tab-label>
<md-tab-body>
View for Item #4 <br/>
data.selectedIndex = 3;
</md-tab-body>
</md-tab>
<md-tab id="tab5">
<md-tab-label><md-icon md-svg-icon="favorite"></md-icon></md-tab-label>
<md-tab-body>
View for Item #5 <br/>
data.selectedIndex = 4;
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
<div class="md-padding" layout="row" layout-sm="column" layout-align="left center"
style="padding-top: 0;">
<md-checkbox ng-model="data.secondLocked" aria-label="Disable item two?" style="margin: 5px;">
Disable item two?
</md-checkbox>
<md-checkbox ng-model="data.bottom" aria-label="Align tabs to bottom?" style="margin: 5px;">
Align tabs to bottom?
</md-checkbox>
</div>
</div>