A UI library of game Overwatch built with Vue.js

by Vue.js Examples

overwatch-ui

A UI library of game Overwatch, built with Vue.js.

View Demo View Documentation

Install

$ yarn install overwatch-ui

or

$ npm install overwatch-ui --save

Import

Then you need to import its components and plugins in main.js.

// main.js
// Import the library
import OwUI from 'overwatch-ui'
import 'overwatch-ui/dist/overwatch-ui.css'

// Use some plugins
Vue.use(OwUI.plugins.$owAlert)

// Register components that you need in the root component
new Vue({
    components: {
        ...OwUI.Components
    },
    router,
    render: h => h(App)
}).$mount('#app')

Usage

Now, let's place some components in your Web APP!

<ow-button type="info">Info</ow-button>
<ow-button type="primary">Primary</ow-button>
<ow-button type="success">Success</ow-button>
<ow-button type="warning">Warning</ow-button>
<ow-button type="danger">Danger</ow-button>

<ow-popover position="top">
    <template slot="content">
        <div>Hello, Overwatch UI!</div>
    </template>
    <ow-button>Pop It!</ow-button>
</ow-popover>

Note

This UI library will reset some styles as followed.
I strongly recommend you to add these styles to all of your projects for saving time to find CSS bugs :)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

GitHub