https://github.com/vouill/vue-slideout
Simple vue implementation of Slideout.js touch sidebar / sidemenu library
https://github.com/vouill/vue-slideout
Last synced: 7 months ago
JSON representation
Simple vue implementation of Slideout.js touch sidebar / sidemenu library
- Host: GitHub
- URL: https://github.com/vouill/vue-slideout
- Owner: vouill
- Created: 2017-02-16T01:10:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-21T13:20:49.000Z (almost 7 years ago)
- Last Synced: 2024-09-17T08:26:13.996Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 354 KB
- Stars: 156
- Watchers: 4
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-zh - Vue,滑出式 - Vue实施流行的图书馆[滑出](https://github.com/Mango/slideout) (UI组件 / 菜单)
- awesome-vue - vue-slideout - Simple vue implementation of Slideout.js touch sidebar / sidemenu library ` 📝 2 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-slideout ★117 - Vue implementation of the popular library [slideout ★7617](https://github.com/Mango/slideout) (UI Components / Menu)
- awesome-vue - vue-slideout - Vue implementation of the popular library [slideout](https://github.com/Mango/slideout) (Components & Libraries / UI Components)
- awesome-vue - vue-slideout - Vue implementation of the popular library [slideout](https://github.com/Mango/slideout) (UI Components / Menu)
README
# vue-slideout
This component is a simple vue implementation of [Slideout.js](https://github.com/Mango/slideout)
[Demo](https://codesandbox.io/s/k3q1zjjml5)
## Install
```bash
npm install vue-slideout
```
## Usage
`App.vue`
```html
Menu
☰
Panel
import Slideout from 'vue-slideout'
export default {
name: 'app',
components: {
Slideout
},
methods: {
open: function () {
console.log('slideoutOpen')
}
}
}
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;
}
```
# Component API
## Data props
The component Props follows the [Slideout options](https://github.com/Mango/slideout#user-content-slideoutoptions)
```html
```
- `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](https://github.com/Mango/slideout#user-content-events)
```html
```
...
## Access the Slideout object from a parent Component
You can access the `slideout` object: `this.$children[i].slideout`
Example:
```javascript
methods: {
somethingClicked: function () {
this.$children[0].slideout.toggle()
}
```