https://github.com/haixiangyan/overwatch-ui

🎮 A UI library of Overwatch, built with Vue.js
https://github.com/haixiangyan/overwatch-ui

overwatch-ui ui ui-components uikit vue

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/haixiangyan/overwatch-ui
• Owner: haixiangyan
• License: mit
• Created: 2019-01-15T04:08:32.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:56:01.000Z (almost 2 years ago)
• Last Synced: 2024-10-25T02:47:45.346Z (16 days ago)
• Topics: overwatch-ui, ui, ui-components, uikit, vue
• Language: Vue
• Homepage: https://github.yanhaixiang.com/overwatch-ui-doc/#/
• Size: 49.1 MB
• Stars: 446
• Watchers: 4
• Forks: 26
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# overwatch-ui

![Overwacht](https://img.shields.io/badge/ui--lib-overwatch-FFC429.svg)

[![npm version](https://badge.fury.io/js/overwatch-ui.svg)](https://badge.fury.io/js/overwatch-ui)

[![Build Status](https://travis-ci.org/Haixiang6123/overwatch-ui.svg?branch=master)](https://travis-ci.org/Haixiang6123/overwatch-ui)

![](https://img.shields.io/npm/l/overwatch-ui.svg)

![](https://img.shields.io/github/stars/Haixiang6123/overwatch-ui.svg?style=social)

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

## Documentation

[Documentation](https://github.yanhaixiang.cn/overwatch-ui-doc/#/)

![Doc](./screenshot/home.png)

## Install

```bash

$ yarn add overwatch-ui

or

$ npm install overwatch-ui --save

```

## Import

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

```javascript

// 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!

```html

Info

Primary

Success

Warning

Danger

    

        
Hello, Overwatch UI!

    

    Pop It!


```

If you wanna explore more usages, here's a playground on [CodeSandBox.io](https://codesandbox.io/s/r093528ny4).

## 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 :)

```css

* {

    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.**