Skip to content

Latest commit

 

History

History
76 lines (62 loc) · 2.63 KB

README.md

File metadata and controls

76 lines (62 loc) · 2.63 KB
Raw

vue-ya-semantic-modal

npm vue2

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>

BOOYAH

  • 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