# 7-ui

> 7-UI elements Component Library

Latest version **1.0.1** (published 2017-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install 7-ui
pnpm add 7-ui
yarn add 7-ui
bun add 7-ui
```

Provides the command `7ui`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-02-17 |
| First published | 2016-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 波比 |
| Maintainers | dkypooh |
| Keywords | 7-ui, NSFI |

## Links

- npm: https://www.npmjs.com/package/7-ui
- Repository: https://github.com/NSFI/7-ui
- Homepage: https://github.com/NSFI/7-ui#readme
- Issues: https://github.com/NSFI/7-ui/issues
- npm.io page: https://npm.io/package/7-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) *
- [lodash](https://npm.io/package/lodash.md) *

## Recent versions

- 1.0.1 (latest) — 2017-02-17
- 1.0.0 — 2017-02-17
- 0.0.1 — 2016-11-03

## README

# 7-ui
7-UI elements Component Library


## npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
> npm install 7-ui

```html
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/7-ui@1.0.0/dist/style.css">
    </head>
    <body>
      <div id="app">
        <sf-button @click.native="visible = true">按钮</sf-button>
      </div>
    </body>
      <!-- 先引入 Vue -->
      <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/7-ui@1.0.0/dist/app.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function(){
            return { visible: false }
          }
        })
      </script>
    </html>
```

## 工具使用

配置文件 `global.config.js`
```js
    /**
     * 全局配置文件
     *
     * @type {*[]}
     */
    module.exports = [
    	{
    		name : "sf-button",   // 组件npm包名称
    		label : "Button 按钮", // 组件名字(导航栏展示)
    		css  : "button.css",   // 组件样式文件, 完整地址(sf-button/src/button.css)
    		path : ""              // 组件打包文件地址
    	},
    	{
    		name: "sf-table",
    		label: "Table 表单",
    		css : "table.css",
    		path :"",
    		child : [{
    			path : "table-column", // 完整地址('sf-table/src/table-column')
    			name : 'sf-table-column'
    		}, {
    			path : "table.vue",  // 完整地址('sf-table/src/table.vue')
    			name : 'sf-table'
    		}]
    	},
    	{
    		name: "sf-spinner",
    		label: "Spinner 过场",
    		css : "spinner",
    		path: "",
    		child : [{
    			path : "clipLoader/clipLoader",
    			name : 'sf-cliploader'
    		}, {
    			path : "scaleLoader/scaleLoader",
    			name : 'sf-scaleloader'
    		},{
    			path : "riseLoader/riseLoader",
    			name : 'sf-riseloader'
    		},{
    			path : "squareLoader/squareLoader",
    			name : 'sf-squareloader'
    		}]

    	},
    	{
    		name: "sf-toast",
    		label: "Toast 全局提示",
    		css: "toast",
    		path :"toast"
    	},
    	{
    		name: "sf-progressbar",
    		label: "Progressbar 进度条",
    		css : "progressbar",
    		path :"progressbar"
    	}
    ]
```

### 组件安装
如需增加额外组件,需要在本地此仓库添加 `npm包(component.package.json)` 及修改响应的`配置文件(global.config.js)`
> gulp install

### 文档打包任务(default)
> gulp document

### 代码打包任务
> gulp build

---
_Source: https://npm.io/package/7-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
