Bottom sheet / modal usage

You can use the bottom sheet or bottom modal in a couple varieties. You can use the default, grid icons and header.

Default

If you click on the button you can see the default bottom sheet / modal in action.

  • cloud Upload
  • home Home
  • print Print
		
<div class="bottom-sheet" id="default">
  <ul>
    <li><i class="material-icons">cloud</i> Upload</li>
    <li><i class="material-icons">home</i> Home</li>
    <li><i class="material-icons">print</i> Print</li>
  </ul>
</div>
		
	

Header

If you click on the button you can see the header bottom sheet / modal in action.

		
<div class="bottom-sheet bottom-sheet-header" id="header">
  <ul>
    <li class="header">Header</li>
    <li><i class="material-icons">cloud</i> Upload</li>
    <li class="divider"></li>
    <li><i class="material-icons">home</i> Home</li>
    <li><i class="material-icons">print</i> Print</li>
  </ul>
</div>
		
	

Grid icons

If you click on the button you can see the grid icons bottom sheet / modal in action.

  • home
    Example 1
    cloud
    Example 2
    cached
    Example 3
  • home
    Example 4
    cloud
    Example 5
    cached
    Example 6
		
<div class="bottom-sheet bottom-sheet-grid" id="grid-icons">
  <ul>
    <li>
      <div class="grid-item">
        <div class="grid-icon">
          <i class="material-icons">home</i>
        </div>
        <div class="grid-content">Example 1</div>
      </div>

      <div class="grid-item">
        <div class="grid-icon">
          <i class="material-icons">cloud</i>
        </div>
        <div class="grid-content">Example 2</div>
      </div>

      <div class="grid-item">
        <div class="grid-icon">
          <i class="material-icons">cached</i>
        </div>
        <div class="grid-content">Example 3</div>
      </div>
    </li>
  </ul>
</div>
		
	

Music

You can also use a specific bottom sheet styled for music.

		
<div class="bottom-sheet bottom-sheet-music" id="music">
  <img src="/">

  <div class="determinate">
    <div class="progressbar" style="width:10%"></div>
  </div>

  <div class="info">
    <div class="band">Queen</div>
    <div class="track">Bohemian Rhapsody</div>
  </div>

  <div class="controls">
    <i class="material-icons">fast_rewind</i>
    <i class="material-icons">play_arrow</i>
    <i class="material-icons">fast_forward</i>
  </div>
</div>
		
	
Queen
Bohemian Rhapsody
fast_rewind play_arrow fast_forward

Settings

Variable Options Result
$bottom-sheet-background Color / variable Changes the background color
$bottom-sheet-font-color Color / variable Changes the font color
$bottom-sheet-header-font-color Color / variable Changes the font color of a title / header
$bottom-sheet-icons-color Color / variable Changes the icon color