# light-ui-program

> ## 下载 ``` npm install light-ui-program ```

Latest version **1.0.0** (published 2020-03-22) · 0 weekly downloads

## Install

```sh
npm install light-ui-program
pnpm add light-ui-program
yarn add light-ui-program
bun add light-ui-program
```

## 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.0 |
| Published | 2020-03-22 |
| First published | 2020-03-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | spring-wind |

## Links

- npm: https://www.npmjs.com/package/light-ui-program
- npm.io page: https://npm.io/package/light-ui-program

## Dependencies (1)

- [semantic-ui-css](https://npm.io/package/semantic-ui-css.md) ^2.4.1

## Recent versions

- 1.0.0 (latest) — 2020-03-22
- 0.0.5 — 2020-03-22
- 0.0.2 — 2020-03-18
- 0.0.1 — 2020-03-18

## README

# light-ui-program

## 下载
```
npm install light-ui-program
```

## 使用
```
import UI from 'light-ui-program'
import 'light-ui-program/lib/light-ui-program.css'
Vue.use(UI)
```

## 组件 
### MyButton 按钮组件
```
  <my-button animated="vertical">
    <div slot="hidden">$10000</div>
    <div slot="visible">
      <i class="shop icon"></i>不要错过哈
    </div>
  </my-button>
  <my-button animated="fade">
    <div slot="hidden">$10000</div>
    <div slot="visible">
      <i class="shop icon"></i>不要错过哈
    </div>
  </my-button>
  <my-button>点个赞再走！</my-button>
  
  <my-button disabled size="mini">小按钮</my-button>
  
  <my-button icon="user" size="mini">小按钮</my-button>
  
  <my-button icon="shop" size="mini">购物车</my-button>
  
  <my-button loading size="huge">大按钮</my-button>
  
  <my-button size="massive">大按钮</my-button>
  
  <my-button @click="btnClick"  icon="wifi" size="massive">我可以点击哦！</my-button>
    
```
### 介绍
```
属性                属性                    是否必填              属性值

定义内容:           slot                     false                
大小:               size                     false            
图标：              icon                     false
禁用状态:           disabled                 false
加载状态:           loading                  false
动画状态:           animated                 false
事件:               click                    false
```

### MySlider 轮播图组件
```
<div>
  <my-slider style="width:250px;height:350px;"
  :auto="2000"
  :curIdx="curIdx"
  :list="list"
  @click="hClick"
  ></my-slider>
</div>
```

### Myheadline 标题组件
```
<div>
    <h1>测试my-headline组件</h1>
    <my-headline :level="1" icon="user" size="Huge">
      主标题
      <div slot="sub">
        副标题
      </div>
    </my-headline>
    <br>
    <my-headline :level="2" icon="settings" size="small">
      <div slot="sub">
        默认内容
      </div>
    </my-headline>
    <br>
  </div>
```
### MyDivider 分隔条组件
```
<div>
    
    <my-divider>默认内容</my-divider>
    
    <my-divider icon="user">用户</my-divider>
    
    <my-divider icon="setting">设置</my-divider>

  </div>
```
### MyDialog 对话框组件
```
<div>
  <button type="primary" @click="isShow = !isShow">切换显示</button>
  <my-dialog v-model="isShow">
  </my-dialog>
</div>
```

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