pip-webui/pip-webui-css/samples/material/list.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
	List
</p>

<md-list>
	<md-list-item ng-click="selected=1">
		<p>Item 1</p>
	</md-list-item>
	<md-list-item ng-click="selected=2">
		<p>Item 2</p>
	</md-list-item>
</md-list>

<md-list ng-cloak>
	<md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
	<md-list-item ng-repeat="topping in toppings">
		<p> {{ topping.name }} </p>
		<md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
	</md-list-item>
	<md-divider></md-divider>
	<md-subheader class="md-no-sticky">Secondary Buttons</md-subheader>
	<md-list-item class="secondary-button-padding">
		<p class="text-overflow rm24">Clicking the button to the right will fire the secondary action</p>
		<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)">
			<md-icon md-svg-icon="icons:admin"></md-icon>
		</md-button>
	</md-list-item>
	<md-list-item class="secondary-button-padding" ng-click="doPrimaryAction($event)">
		<p class="text-overflow rm24">Click anywhere to fire the primary action, or the button to fire the secondary</p>

		<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)">
			<md-icon md-svg-icon="icons:admin"></md-icon>
		</md-button>
	</md-list-item>
	<md-divider></md-divider>
	<md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
	<md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
		<md-icon md-svg-icon="icons:admin"></md-icon>
		<p> {{ setting.name }} </p>
		<md-switch class="md-secondary" ng-model="setting.enabled"></md-switch>
	</md-list-item>
	<md-list-item ng-click="navigateTo('data usage', $event)">
		<md-icon md-svg-icon="icons:bug"></md-icon>
		<p>Data Usage</p>
	</md-list-item>
	<md-divider></md-divider>
	<md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
	<md-list-item ng-repeat="message in messages">
		<md-checkbox ng-model="message.selected"></md-checkbox>
		<p>{{message.title}}</p>
		<md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="icons:message"></md-icon>
	</md-list-item>
	<md-divider></md-divider>
	<md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
	<md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)">
		<img alt="{{ person.name }}" ng-src="https://pp.vk.me/c7004/v7004013/1375f/C06u_U2aGX0.jpg" class="md-avatar" />
		<p>{{ person.name }}</p>
		<md-icon md-svg-icon="icons:bug" ng-click="doSecondaryAction($event)" aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="{'md-primary': person.newMessage}"></md-icon>
	</md-list-item>
</md-list>

<md-content>
	<md-list>
		<md-subheader class="md-no-sticky">3 line item</md-subheader>
		<md-list-item class="md-3-line" ng-repeat="item in todos">
			<img ng-src="https://pp.vk.me/c633319/v633319113/d90/LgxsaT25n1s.jpg" class="md-avatar" alt="{{item.who}}" />
			<div class="md-list-item-text layout-column">
				<h3>{{ item.who }}</h3>
				<h4>{{ item.what }}</h4>
				<p>{{ item.notes }}</p>
			</div>
		</md-list-item>
		<md-divider ></md-divider>
		<md-subheader class="md-no-sticky">2 line item</md-subheader>
		<md-list-item class="md-2-line">
			<img ng-src="https://pp.vk.me/c633319/v633319113/d90/LgxsaT25n1s.jpg" class="md-avatar" alt="{{todos[0].who}}" />
			<div class="md-list-item-text">
				<h3>{{ todos[0].who }}</h3>
				<p>Secondary text</p>
			</div>
		</md-list-item>
		<md-divider ></md-divider>
		<md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
		<md-list-item class="md-3-line md-long-text">
			<img ng-src="https://pp.vk.me/c633319/v633319113/d90/LgxsaT25n1s.jpg" class="md-avatar" alt="{{todos[0].who}}" />
			<div class="md-list-item-text">
				<h3>{{ todos[0].who }}</h3>
				<p>
					Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
					Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
					velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
				</p>
			</div>
		</md-list-item>
		<md-list-item class="md-3-line md-long-text">
			<img ng-src="https://pp.vk.me/c633319/v633319113/d90/LgxsaT25n1s.jpg" class="md-avatar" alt="{{todos[1].who}}" />
			<div class="md-list-item-text">
				<h3>{{ todos[1].who }}</h3>
				<p>
					Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
					Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
					velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
				</p>
			</div>
		</md-list-item>
		<md-divider ></md-divider>
		<md-subheader class="md-no-sticky">Classes</md-subheader>
		<md-list-item class="md-2-line" ng-repeat="phone in phones">
			<md-icon md-svg-icon="icons:phone" ng-if="$index !== 2" ng-class="{'md-avatar-icon': $index === 1}"></md-icon>
			<div class="md-list-item-text" ng-class="{'md-offset': $index == 2 }">
				<h3> {{ phone.number }} </h3>
				<p> {{ phone.type }} </p>
			</div>
		</md-list-item>
	</md-list>
</md-content>