Giter Site home page Giter Site logo

chenjiahan / vodal Goto Github PK

View Code? Open in Web Editor NEW
379.0 12.0 58.0 1.67 MB

A Vue modal with animations.

Home Page: https://chenjiahan.github.io/vodal/

License: MIT License

HTML 13.67% JavaScript 11.39% Vue 28.55% CSS 46.08% Shell 0.30%
animation vue modal dialog

vodal's Introduction

Vodal Dependency Status NPM downloads

A vue modal with animations. Example

Installation

npm i -S vodal

Usage

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',
    
  data() {
    return {
      show: false
    }
  }
}
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

Props

Property Type Default Description
width number 400 width of dialog
height number 240 height of dialog
measure string px measure of width and height
show bool false whether to show dialog
mask bool true whether to show mask
closeButton bool true whether to show close button
closeOnEsc bool false whether close dialog when esc pressed
closeOnClickMask bool true whether close dialog when mask clicked
animation string zoom animation type
duration number 300 animation duration
className string / className for the container
customStyles object / custom dialog styles
customMaskStyles object / custom mask styles

Event

Name Description
hide triggers when dialog will hide
clickMask triggers when mask clicked

Animation Types

  • zoom
  • fade
  • flip
  • door
  • rotate
  • slideUp
  • slideDown
  • slideLeft
  • slideRight

Other

React version

vodal's People

Contributors

ansidev avatar chenjiahan avatar dependabot[bot] avatar shershen08 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vodal's Issues

How to use without any build system?

I am unable to find .min.js version. Would you please provide it?
I don't use any build system like npm or webpack. I just want to use this great plugin in Vue app. How to do that? Thanks.

thanks

thanks for the best modal library for vue!
other libraries, e.g: vue-js-modal are badly broken.
keep up the good work!

Auto size modal height

Is there a way of modal height be computed with the slot html?
My main problem is that for my use i cannot pass a fix height for the modal, because vary a lot depend on the form that user will trigger!

How do you integrate this into Laravel?

I like this package quite a lot.
However, I have an empty Laravel project and have been trying to install vodal into it, with no luck. I know the basics of vue.js but am still a beginner and have never used a Vue.js package in my laravel app before.

After running npm i -S vodal

Where does this code go? Help would be appreciated.

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',
    
  data() {
    return {
      show: false
    }
  }
}
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

Focus on input in vodal

Hi
I trying to focus on input in modal with $ref but not working.

I set ref on element like this:
<input type="number" ref="pcounts" v-model="Count"/>

Focus on it in method like this:
this.$refs.pcounts.focus();

Side panel with vodal

First thanks a lot for your awesome work!

I am trying to create a side panel with vodal, my main problems are:

  1. I don't know how to put vodal in the left, it always get centered
  2. I cannot mix units for example height:100% and width:300px

Thanks in advance for any help

Where to include css animation files?

First of all, great library.

I am wondering where I would be able to include the css animation files? I have a Vue app working with Tailwind at the moment, and am trying to integrate this library with that, however, I am experiencing errors.

EDIT: Figured out I was making the mistake. Had to place a full reference to node_modules directory to get it to work for me within my main.js file..

:show in v-for cant change

hi
lock i want change :show="item.show"
but don't work
this is my method

popshow(item,index){
            	this.Comments[index].popshow
   }

Comments this is my object

and has a key[popshow] = false

this is god work when i give console but don't happen ...

so this is my template cod

<vodal :show="item.popshow" ....

how solve this problem...

Vodal doesn't worl unless you build it in node_modules

Because of only source content in node_modules vodal doesn't work for me. I do not build node modules I just use content of their "build" or "dist" folders like in "vue-clickaway" or "vuejs-datepicker" components.

Disable width, height attributes

Hello. In Rodal exist ability to write custom style. What about Vodal? How can I disable or use different measures in width & height attributes?

How to avoid aligning inner component center?

I am embedding a monaco-editor in the vodal, however, all code in the editor are aligned center which is not expected, so I wonder how to avoid that?

Thanks for the nice lib and the reply!

Requires vue 2.5.9

Would like to use this but getting this error on installation, as run 2.5.17.
Advise please on how to overcome or can you update dependency list.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.