Simple vue implementation of Slideout.js touch sidebar / sidemenu library
Clone or download
Latest commit 21b5a56 Jan 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build added slideout as external dep Feb 24, 2017
config first commit Feb 16, 2017
docs index fixed Feb 18, 2017
src Bind toggle to all elements found by a selector Jan 19, 2019
static first commit Feb 16, 2017
test first commit Feb 16, 2017
.babelrc first commit Feb 16, 2017
.editorconfig first commit Feb 16, 2017
.eslintignore first commit Feb 16, 2017
.eslintrc.js first commit Feb 16, 2017
.gitignore added callback data to events Jan 10, 2018
.npmignore added callback data to events Jan 10, 2018
README.md indentation fix Sep 15, 2017
index.html first commit Feb 16, 2017
package.json 1.8.0 Jan 21, 2019
yarn.lock first commit Feb 16, 2017

README.md

vue-slideout

This component is a simple vue implementation of Slideout.js

Demo

Install

   npm install vue-slideout

Usage

App.vue

<template>
  <div id="app">
    <Slideout menu="#menu" panel="#panel" :toggleSelectors="['.toggle-button']" @on-open="open">
      <nav id="menu">
        <div>Menu</div>
      </nav>
      <main id="panel">
        <header>
          <div>
            <button class="toggle-button">☰</button>
            Panel
          </div>
        </header>
      </main>
    </Slideout>
  </div>
</template>

<script>
  import Slideout from 'vue-slideout'

  export default {
    name: 'app',
    components: {
      Slideout
    },
    methods: {
      open: function () {
        console.log('slideoutOpen')
      }
    }
  }
</script>

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    background-color: #1D1F20;
    color: white;
  }

  .slideout-menu-left {
    left: 0;
  }

  .slideout-menu-right {
    right: 0;
  }

  .slideout-panel {
    background-color: #4B5;
    color: white;
    position: relative;
    z-index: 1;
    will-change: transform;
    min-height: 100vh;
  }

  .slideout-open,
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden;
  }

  .slideout-open .slideout-menu {
    display: block;
  }
</style>

Component API

Data props

The component Props follows the Slideout options

<Slideout
panel="selector"
padding="number"
side="str"
>
</Slideout>
  • panel="selector" (String) - Selector of the panel HTML Element. Default #panel.
  • menu="menu" (String) - Selector of the menu HTML Element. Default #menu.
  • menu="duration" (String) - (Number) - The time (milliseconds) to open/close the slideout. Default: 300.

...

Events

The component Events follows Slideout events

<Slideout
@on-open="method"
@once-open="method">
</Slideout>

...

Access the Slideout object from a parent Component

You can access the slideout object: this.$children[i].slideout

Example:

  methods: {
    somethingClicked: function () {
      this.$children[0].slideout.toggle()
    }