Vue-Semantic-Modal

Modal component for semantic-ui without jQuery

Example

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 |

Events

• changed

Sent when the modal state changed with a boolean true if the modal is opened

• displayChanged

Sent when the modal visual state changed with a string representing the modal visual state:

'closed', 'opening', 'opened', 'closing'

• clickAwayModal

Sent when modal is opened and user click outside.

Installation

• Available through:

 npm install vue-semantic-modal