Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 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 (about 2 years ago)
- Last Synced: 2024-12-15T21:08:00.497Z (9 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: 447
- 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-uior
$ 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.**