Material Design Inspired Bottom Sheets For Web

Category: Javascript | September 18, 2020
Views Total:6,604 views
Official Page:Go to website
Last Update:September 18, 2020


Material Design Inspired Bottom Sheets For Web


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">
    <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 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>
  <div class="c-bottom-sheet__container">

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:


You Might Be Interested In:

Leave a Reply