SwipeableDrawer

A package that provides a swipeable drawer

Installation

By download

Download the files in src/ and include the files in your webpage

Using npm (recommended)

First download by running

npm install --save swipeabledrawer

Then include the package into your javascript file by adding the following line

const SwipeableDrawer = require("swipeabledrawer");

Setup

First create a SwipeableDrawer element with your navigation in it on your webpage. Something like this:

<swipeable-drawer>
    <!-- Free to choose content -->
    <div class="navigation">
        <div class="link"><a href="{{link}}">{{name}}</a></div>
        <div class="link"><a href="{{link}}">{{name}}</a></div>
        <div class="link"><a href="{{link}}">{{name}}</a></div>
    </div>
</swipeable-drawer>

You can than setup the drawer by putting this in a javascript file:

const drawer = new SwipeableDrawer();
drawer.setup();

This will initialize the drawer and bind the correct events. You can than also manually open and close the drawer by calling drawer.open() and drawer.close(). This is useful for extra buttons to open and close the drawer.

Furthermore you need to import src/style.css into your webpage. This can be done using various methods. For example, when using webpack with css-loader you can add the following line to your css file:

@import "~swipeabledrawer/src/style";

Read more about this here.