A semantic-ui modal component for Vue2 without Jquery

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.

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

Author

qgp9

GitHub