hyjiacan / Vue Slideout
Licence: mit
A Slide-Out component for Vue.js 2.0
Stars: ✭ 91
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Slideout
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+13165.93%)
Mutual labels: slide, vuejs2
Easyintro
The flexible, easy to use, all in one app intro library for your Android project.
Stars: ✭ 89 (-2.2%)
Mutual labels: slide
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+1240.66%)
Mutual labels: vuejs2
Phoenix Vue Demo
Basic app developed with Phoenix and Vue 2.0, including authentication.
Stars: ✭ 80 (-12.09%)
Mutual labels: vuejs2
Mydailylearn
🚀 Important commands, Code Snippets, Basics on different topics learning daily 🎉!
Stars: ✭ 87 (-4.4%)
Mutual labels: vuejs2
Cppcon2015
Repository for the slides and the code of my CppCon 2015 talks.
Stars: ✭ 77 (-15.38%)
Mutual labels: slide
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-2.2%)
Mutual labels: vuejs2
Sequelize Bookmarks
Sequelize ORM application with Express 4 server, Webpack and Vue.js
Stars: ✭ 85 (-6.59%)
Mutual labels: vuejs2
Express Vue
Vue rendering engine for Express.js. Use .Vue files as templates using streams
Stars: ✭ 1,226 (+1247.25%)
Mutual labels: vuejs2
Vue Cloudfront
vue-cloudfront - PWA for cloud storage with focus on design and performance. Made especially for self-hosting purposes. Build with vuejs2 and vuex. Always Open Source, MIT license.
Stars: ✭ 80 (-12.09%)
Mutual labels: vuejs2
Snapaper
📰 Past Papers Sharing Platform Based On Vue.js & GCE Guide | CAIE 试卷分享与下载平台
Stars: ✭ 90 (-1.1%)
Mutual labels: vuejs2
Bottle Vue Kickstart
🍕 Very basic Bottle kickstart kit with Vue.js and Webpack. Included Axios, Autoprefixer, Babel, Webpack config, demo app with Bulma and Web font loader.
Stars: ✭ 83 (-8.79%)
Mutual labels: vuejs2
Vuex Simple Structure
📈 A repository showcasing a simple Vuex store inside a Vue.js application based on Large-scale Vuex application structures @3yourmind
Stars: ✭ 87 (-4.4%)
Mutual labels: vuejs2
V Show Slide
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.
Stars: ✭ 90 (-1.1%)
Mutual labels: vuejs2
Slideout
A Slide-Out component for Vue.js 2.0
Dependencies
- Vue.js 2.x
- Less
Install
NodeJS ENV (commonjs)
npm i @hyjiacan/vue-slideout
or
yarn add @hyjiacan/vue-slideout
You can get the latest code:
git clone https://github.com/hyjiacan/vue-slideout.git
or just download archive
Browser ENV (umd)
Since
2.4.0
Like node-env, a global Slideout
will be attached onto window
.
The newest version
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.css"/>
Specified version
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/[email protected]<VERSION>/lib/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/[email protected]<VERSION>/lib/slideout.css"/>
unpkg is also available: instead cdn.jsdelivr.net with unpkg.com.
Also, you can use the uncompressed by instead slideout.umd.min.js with slideout.umd.js
Usage
Global (recommended)
main.js
import Vue from 'vue'
import Slideout from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'
// import Slideout component, and set the defaults props
Vue.use(Slideout, {
// set default props here
})
In Component
Foobar.vue
<template>
<slideout @closing="onClosing" v-model="visible" title="The title">
<div>content</div>
</slideout>
</template>
<script>
import Slideout from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'
export default {
name: 'Foobar',
components: { Slideout },
data () {
return {
visible: false
}
},
methods: {
onClosing (e) {
// prevent close and wait
e.wait = true
// close after 3 seconds
setTimeout(() => {
// assign true to close, do nothing or assign false to cancel close.
e.close = true
}, 3000)
}
}
}
</script>
- For more usage, see https://hyjiacan.github.io/vue-slideout/
- API reference: API.md
Try it on CodePen on the fly 2.x 3.x.
Development
yarn
# start dev server
yarn serve
# Build library
yarn release
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].