Vue-semantic-modal NPM

Vue-Semantic-Modal

Modal component for semantic-ui without jQuery

Example

demo

Usage

<modal v-model="showModal">

    <p slot="header">Confirmation needed</p>

    <p slot="content">Do you want to continue?</p>

    <template slot="actions">
        <div class="ui black deny button" @click="showModal=false">
          No
        </div>
        <div class="ui positive right button" @click="confirm">
          Yes
        </div>
    </template>

</modal>

import modal from 'vue-semantic-modal'

export default {
  components: {
    modal
  },
  data() {
    return {
        showModal: true,
        confirmed: true
    }
  },
  methods () {
    confirm () {
        this.confirmed = true
        this.showModal = false
    }
  }
}
  //...

Include in the root component semantic-ui CSS:

@import '~dist/semantic.css';

Slot

header
content
actions

Props

Name	Required	Type/Value	Default	Description
opened	no	`Boolean`	false	triggers the opening/closing. Can be bind with v-model
hasImage	no	`Boolean`	false	Should be true if the content contains image as per semantic-ui specification
animationDuration	no	`Number`	500	Opening and closing animation duration in ms
showCloseIcon	no	`Boolean`	false	If true close icon of the model is displayed
modalVariation	no	`'fullscreen', 'basic', 'mini', 'small', 'large' or ''`	''	Additional modal styling see here
dimmerVariation	no	`'inverted' or ''`	''	Additional dimmer styling see here
modalTransition	no	`String`	'scale'	name of the modal transition to be applied. See here