Getting started

Win7 UI is a component library for creating user interface elements in Windows 7 style in web apps built from Vue. It leverages the 7.css (opens new window) package underneath, which is a CSS-only framework with the same purpose.

Note

This library only supports Vue 2.x and assumes that you are already familiar with it, if not, please check out its documentation (opens new window).

Installation

In your Vue project, run the following command:

npm install win7-ui
# or
yarn add win7-ui

In your main.js or index.js, add the following:

import Winui from "win7-ui";
import "win7-ui/lib/style.css";
...
Vue.use(Winui);
...

The components will then be available globally in your project with the prefix winui-, an example usage as below:

<template>
  <winui-button @click="doSomething">Hello world!</winui-button>
</template>

<script>
export default {
  methods: {
    doSomething() {}
  }
}
</script>

<style>
...
</style>

For more specific instructions on each component, check out the component pages.