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
75 lines (67 loc) • 2.41 kB
HTML
<div ng-controller="SubheaderAppCtrl" layout="column" flex layout-fill ng-cloak>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">My Messages</div>
</md-toolbar>
<md-content style="height: 600px;" md-theme="altTheme">
<section>
<md-subheader class="md-primary">Unread Messages</md-subheader>
<md-list layout-padding>
<md-list-item class="md-3-line" ng-repeat="message in messages">
<img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
<div class="md-list-item-text">
<h3>{{message.what}}</h3>
<h4>{{message.who}}</h4>
<p>
{{message.notes}}
</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader class="md-warn">Late Messages</md-subheader>
<md-list layout="column" layout-padding>
<md-list-item class="md-3-line" ng-repeat="message in messages">
<img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
<div class="md-list-item-text">
<h3>{{message.what}}</h3>
<h4>{{message.who}}</h4>
<p>
{{message.notes}}
</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader>Read Messages</md-subheader>
<md-list layout="column" layout-padding>
<md-list-item class="md-3-line" ng-repeat="message in messages">
<img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
<div class="md-list-item-text">
<h3>{{message.what}}</h3>
<h4>{{message.who}}</h4>
<p>
{{message.notes}}
</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader class="md-accent">Archived messages</md-subheader>
<md-list layout="column" layout-padding>
<md-list-item class="md-3-line" ng-repeat="message in messages">
<img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
<div class="md-list-item-text">
<h3>{{message.what}}</h3>
<h4>{{message.who}}</h4>
<p>
{{message.notes}}
</p>
</div>
</md-list-item>
</md-list>
</section>
</md-content>
</div>