Skip to content
A UI library of Overwatch, built with Vue.js
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Add Input component Jan 18, 2019
screenshot Update Screenshot Mar 3, 2019
src Fix button margin bug Mar 22, 2019
tests
.browserslistrc
.gitignore
.travis.yml Update Travis CI yml file Mar 12, 2019
LICENSE Update LICENSE Mar 19, 2019
README.md
babel.config.js Add Karma coverage Feb 21, 2019
deploy.sh
karma.config.js
package.json
postcss.config.js
vue.config.js
yarn.lock

README.md

overwatch-ui

Overwacht npm version Build Status License: MIT

Overwatch UI library for Web APP, built with Vue.js.

Documentation

Documentation

Doc

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>

If you wanna explore more usages, here's a playground on CodeSandBox.io.

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;
}

Copyright Statement

I love playing Overwatch, so I built this just for fun but not for commercial purpose. Please note: some images, logos are from Overwatch made by Blizzard Entertainment. If you want to use this lib for commercial purpose, you have to obey those licences and place a proper licence for your project.

You can’t perform that action at this time.