Material Design Inspired Bottom Sheets For Web

Preview:

Description:

A vanilla JavaScript solution to create a draggable and touch-enabled bottom sheet inspired by Android (Material Design).

How to use it:

1. Insert items to the bottom sheet.

<div id="language-selector" class="c-bottom-sheet c-bottom-sheet--list">
  <div class="c-bottom-sheet__scrim"></div>
  <div class="c-bottom-sheet__sheet">
    <div class="c-bottom-sheet__handle">
      <span></span>
      <span></span>
    </div>
    <ul class="c-bottom-sheet__list">
      <li class="c-bottom-sheet__item active">
        <a class="c-bottom-sheet__link" href="#" class="d-flex justify-content-between">JavaScript</a>
      </li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">CSS/CSS3</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">HTML5/XML</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">Angular.js</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">React.js</a></li>
    </ul>
  </div>
  <div class="c-bottom-sheet__container">
  </div>
</div>

2. Load the main script into the document.

<script src="main.js"></script>

3. Run the demo using the Parcel web application bundler.

// install parcel
npm install -g parcel-bundler
// build
parcel index.html

4. Then you can view the demo on:

http://localhost:1234/