https://github.com/qgp9/vue-ya-semantic-modal

https://github.com/qgp9/vue-ya-semantic-modal

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/qgp9/vue-ya-semantic-modal
• Owner: qgp9
• License: mit
• Created: 2017-07-17T14:35:47.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-19T20:40:43.000Z (over 8 years ago)
• Last Synced: 2025-05-28T03:50:35.000Z (6 months ago)
• Language: JavaScript
• Size: 101 KB
• Stars: 18
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-zh - Vue亚语意态 - Vue2的另一个语义模式组件,没有Jquery但有Vue过渡 (UI组件 / 覆盖)
• awesome-vue - vue-ya-semantic-modal - Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world. ` 📝 4 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-ya-semantic-modal ★18 - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition (UI Components / Overlay)
• awesome-vue - vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition (Components & Libraries / UI Components)
• awesome-vue - vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition (UI Components / Overlay)

README

          
# vue-ya-semantic-modal

[![npm](https://img.shields.io/npm/v/vue-ya-semantic-modal.svg)](https://www.npmjs.com/package/vue-ya-semantic-elements)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

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](https://semantic-ui.com/modules/modal.html#/examples) 

[demo](http://vue-ya-semantic.netlify.com/#/modal) [source](https://github.com/qgp9/vue-ya-semantic-demo/blob/master/src/components/Modal.vue)

## Set Up

* Global set up

```js

import YaModal from 'vue-ya-semantic-modal'

Vue.use(YaModal)

```

* Local set up for each component

```js

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

```html

Show Modal

  
Title

  


    
Any content for your modal