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

`javascript
import Vue from 'vue'
import overBody from 'vue-over-body'

new Vue({
components: {
'vue-over-body': overBody
},
data: function () {
return {
open: 1
}
}
}).$mount('#app')
`

`html





`

`css
.before {
top: 50px;
right: -300px;
width: 300px;
background-color:yellow;
position:absolute;
}

.after {
right: 50px;
}
``

$3

- 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!