Bemat Admin v1 - Lists

Bemat Admin Exclusive Premium Plugin

Subheaders are special list tiles that delineate distinct sections of a list or grid list and are typically related to the current filtering or sorting criteria.

Initializing

To work with subheader lists, you must initialize the jquery.subheader.js by calling the init method, or using the data-toggle="subheader" attribute.

$(".subheader-list-demo").subheader();

Subheader Sticky

Upon scrolling, subheaders remain pinned to the top of the screen until pushed on or off screen by the next subheader.

Examples:

Sticky Subheader 1

Peter Carlsson
Trevor Hansen
Peter Carlsson
Trevor Hansen

Sticky Subheader 2

Peter Carlsson
Trevor Hansen
Peter Carlsson
Trevor Hansen

Sticky Subheader 3

Peter Carlsson
Trevor Hansen
Peter Carlsson
Trevor Hansen

HTML Code:

<div class="subheader-list-demo" data-class="height-4">
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 1</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>	
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 2</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>
	<section>
		<div class="list-subheader" data-mode="sticky">Sticky Subheader 3</div>
		<ul class="list">
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Peter Carlsson</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
			<li class="list-item list-1-line">
				<img src="img/avatar.png" class="list-avatar" alt="Avatar">
				<div class="list-item-text layout-column">
					<h3>Trevor Hansen</h3>
				</div>
				<button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button>
			</li>
		</ul>
	</section>
</div>