What is a Bottom Sheet?

Bottom Sheets are like panels. But instead of coming from the left or the right they appear from the bottom.

Two different types

A bottom Sheet can be presented as a list (items are displayed in rows) or as blocks (items are displayed in floated square-blocks)

---

Demonstration

open as a list open as blocks

Sample-Code
Default list item as blocks:

<div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet" data-animate="false" data-position='bottom' data-display="overlay">...</div>

List item as list:

<div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet ui-bottom-sheet-list" data-animate="false" data-position='bottom' data-display="overlay">...</div>

Bottom Sheet Content

<div class='row around-xs'>
	<div class='col-xs-auto'>
		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
			<i class='zmdi zmdi-assignment zmd-2x'></i>
			<strong>Clipboard</strong>
		</a>
	</div>
	<div class='col-xs-auto'>
		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
			<i class='zmdi zmdi-fire zmd-2x'></i>
			<strong>Hot Stuff</strong>
		</a>
	</div>
	<div class='col-xs-auto'>
		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
			<i class='zmdi zmdi-cloud-outline-alt zmd-2x'></i>
			<strong>Cloud</strong>
		</a>
	</div>
	<div class='col-xs-auto'>
		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
			<i class='zmdi zmdi-format-color-fill zmd-2x'></i>
			<strong>Fillcolor</strong>
		</a>
	</div>
</div>