vue-ya-semantic-modal

Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition

This component only provide a frame and transitions for modal. Configurations of an inner modal is on your own, and it should be almost identical with usual way of semantic-ui. If your are not sure of how configure it, follow official examples

demo source

Set Up

• Global set up

import YaModal from 'vue-ya-semantic-modal'
 
Vue.use(YaModal)

• Local set up for each component

import YaModal from `vue-ya-semantic-modal'
 
export default {
  name: 'MyComponent',
  props: ['myProp'],
  ...
  components: {
    YaModal: Yamodal() // It's important to use as function
  }

Usage

• Basic usage

<button class="ui primary button" @click="activeModal=true">Show Modal</button>
 
<ya-modal verticla flip inverted v-model="activeModal">
  <div class="ui header">Title</div>
  <div class="content">
    <p>Any content for your modal</p>
  </div>
  <div class="actions">
    <div class="ui red basic cancel inverted button" @click="activeModal=false">
      <i class="remove icon> No
    </div>
    <div class="ui green ok inverted button @click="activeModal="false">
      <i class="checkmark icon></i> yes
    </div>
  </div>
</ya-modal>

• When you want modal without transition, use :transition="false"
• inverted attribute will be applied dimmer container
• A transition of dimmer container is always fade
• Possible class words for a inner modal are

bounce browser drop fade flash flip fly jiggle scale slide swing tada
vertical horizontal left right up down
basic mini tiny small medium big large

props

• clickAway : When true, modal will be turned off with outer click. default is true
• escEscape : When true, modal will be turned off with esc key down. default is true
• leaveDelay : Dealy time of transition of dimmer class after transition of a modal start while leaving. default is 300ms
• modalClass : Additional classes for an inner modal. Values should be an object like binded class
• transition: Turn on and off transition effect. default is true`

📜 Changelog

Acknowledge

©️ License

MIT