https://github.com/marcodpt/vue-over-body

Create modals, sidebars, notifications, pop ups with css transitions!
https://github.com/marcodpt/vue-over-body

component css-transitions modal notifications sidebar vue vuejs2

Last synced: 3 days ago
JSON representation

Create modals, sidebars, notifications, pop ups with css transitions!

• Host: GitHub
• URL: https://github.com/marcodpt/vue-over-body
• Owner: marcodpt
• License: mit
• Created: 2018-08-21T13:05:03.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-19T21:30:11.000Z (about 6 years ago)
• Last Synced: 2024-09-19T13:31:52.774Z (8 days ago)
• Topics: component, css-transitions, modal, notifications, sidebar, vue, vuejs2
• Language: JavaScript
• Homepage: https://marcodpt.github.io/vue-over-body/
• Size: 1.36 MB
• Stars: 39
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-over-body

Create modals, sidebars, notifications, pop ups with css transitions! 

## Demo

[Live Demo](http://marcodpt.github.io/vue-over-body)

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

  

    


      ×

      
A little alert message!
 

      
For the users of your app!
 

    

  

```


```css

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