vue-over-body
vue-over-body
Create modals, sidebars, notifications, pop ups with css transitions!
Demo
Live Demo
with bulma css framework, but we do not impose any css framework
Install
npm install --save vue-over-body
Usage
import Vue from 'vue'
import overBody from 'vue-over-body'
new Vue({
components: {
'vue-over-body': overBody
},
data: function () {
return {
open: 1
}
}
}).$mount('#app')
<vue-over-body :dim="false" :open="open" before="before" after="after" :transition="0.3">
<div>
<button @click="open = 0">×</button>
<p>A little alert message!</p>
<p>For the users of your app!</p>
</div>
</vue-over-body>
.before {
top: 50px;
right: -300px;
width: 300px;
background-color:yellow;
position:absolute;
}
.after {
right: 50px;
}
Props
- open
- type: Number
- default: 0
- description: 0 means hide, other number means z-index of the component
- before
- type: String
- default: ""
- description: css class aplied to slot parent, always active
- after
- type: String
- default: ""
- description: css class aplied to slot parent, active after the transition
- transition
- type: Number
- default: 0.3
- description: time of transition in seconds
- dim
- type: Boolean
- default: true
- description: make the background darker?
- dialogStyle
- type: Object
- default: {}
- description: style to be applied on dialog container
Contribute
We need help! Our goals are:
- CSS Transitions
- Add tests
- More usage examples and better home page
- Add support to most browsers
What is outside of the scope of this project:
- Create any kind of layout like buttons, headers, pre build alerts!
Dependencies
babel-core: ^6.26.3babel-plugin-transform-es2015-arrow-functions: ^6.22.0babel-plugin-transform-runtime: ^6.23.0babel-preset-es2015: ^6.24.1babel-preset-stage-2: ^6.24.1babel-runtime: ^6.26.0babelify: ^8.0.0browserify: ^15.2.0bulma: ^0.7.1http-server: ^0.11.1vue: ^2.4.1vue-gh-corners: ^2.0.0vueify: ^9.4.1