https://github.com/nju33/apoc-sidebar

Sidebar without dependenceies
https://github.com/nju33/apoc-sidebar

pure-javascript sidebar ui

Last synced: 10 months ago
JSON representation

Sidebar without dependenceies

• Host: GitHub
• URL: https://github.com/nju33/apoc-sidebar
• Owner: nju33
• License: mit
• Created: 2017-03-28T20:25:37.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-12-08T01:09:45.000Z (about 8 years ago)
• Last Synced: 2024-12-22T15:46:59.434Z (about 1 year ago)
• Topics: pure-javascript, sidebar, ui
• Language: JavaScript
• Homepage: https://nju33.github.io/apoc-sidebar/
• Size: 1.06 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# ApocSidebar

[![npm: apoc-sidebar](https://img.shields.io/npm/v/apoc-sidebar.svg)](https://www.npmjs.com/package/apoc-sidebar)

[![CircleCI: nju33/apoc-sidebar](https://circleci.com/gh/nju33/apoc-sidebar.svg?style=svg)](https://circleci.com/gh/nju33/apoc-sidebar)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

![license: mit](https://img.shields.io/packagist/l/doctrine/orm.svg)

Sidebar without dependenceies

![screenshot](https://github.com/nju33/apoc-sidebar/raw/master/images/screenshot.gif?raw=true)

## Install or Download

```bash

yarn add apoc-sidebar

npm i apoc-sidebar

```

Or access to [releases page](https://github.com/nju33/apoc-sidebar/releases).

Then, download the latest version.

## Demo

[https://nju33.github.io/apoc-sidebar/](https://nju33.github.io/apoc-sidebar/)

## Usage

```html

...



...


```

```js

// es

import ApocSidebar from 'apoc-sidebar';

const sidebar = new ApocSidebar(

  document.getElementById('sidebar'),

  {

    // options

    // default

    type: 'slide',

    // There are other types like this

    // - 'water',

    // - 'push',

    // - 'lid',

    // - 'door',

    // - 'waterfall',

    // - 'waterfallReverse'

    // Parent surrounding `#sidebar` and `[data-apoc-sidebar-sibling]`

    // default

    container: sidebar.parentElement // the parentElement of the `#sidebar`

    // Which side you put on

    // default

    side: 'left', // or 'right'

    // The `transition-timing-function` value of css attached

    // to all relevant elements

    // default (easeInOutQuad)

    // ref: http://easings.net/

    transitionTimingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',

    // The `transition-duration` value of css attached

    // to all relevant elements

    // default

    transitionDuration: '.2s',

    // Wall background color

    // default

    wallBackgroundColor: 'rgba(0,0,0,.3)'

  }

);

sidebar.init();

// You can also decide "Open first or close" like `sidebar.init(true)`.

document.getElementById('trigger').addEventListener('click', () => {

  if (sidebar.isOpen()) {

    sidebar.close();

  } else {

    sidebar.open();

  }

});

setTimeout(() => {

  // Delete events

  sidebar.teardown();

}, 999999)

```

### Examples

- `test/fixtures/`

- `example/webpack/`

## LICENSE

The MIT License (MIT)

Copyright (c) 2017 nju33