# ui-200

> ## 下载 ``` npm i ui-200 ```

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

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-03-22 |
| First published | 2020-03-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wangpeng2000 |

## Links

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

## Dependencies (1)

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

## Recent versions

- 0.0.4 (latest) — 2020-03-22
- 0.0.3 — 2020-03-22
- 0.0.2 — 2020-03-18
- 0.0.1 — 2020-03-18

## README

# ui-200

## 下载
```
npm i ui-200
```

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

## 组件
- 按钮
- 轮播图
- 分隔条
- 标题
- 对话框
### MyButton
```
<my-button animated="vertical">
      <div slot="visible"><i class="shop icon"></i>不要错过哈</div>
    </my-button>
    <br>
    <my-button animated="vertical">
      <div slot="hidden"> ￥90000</div>
      <div slot="visible"><i class="shop icon"></i>不要错过哈</div>
    </my-button>

    <my-button animated="fade" >
      <div slot="hidden">$10000</div>
      <div slot="visible">不要！！！！</div>
    </my-button>
    <br>
    <br>
    <my-button disabled>点赞再走吧!</my-button>
    <br>
    <br>
    <my-button icon="user">带图标的按钮</my-button>
    <br>
    <br>
    <my-button icon="bug">带图标的按钮</my-button>
    <br>
    <br>
    <MyButton icon="bug" size="mini">mini小按钮</MyButton>
    <br>
    <br>
    <my-button loading size="huge">loading大按钮</my-button>
    <br>
    <br>
    <my-button size="massive">哈哈哈大按钮</my-button>
    <br>
    <br>
    <my-button disabled size="massive" icon="warning circle">warning circle</my-button>
    <br>
```


### divider
分隔条组件
```
<my-divider icon="user">hahha</my-divider>
      <br>
      <br>
      <br>
<my-divider icon="rss">杨老板</my-divider>
```
### slider
轮播图组件
```
<template>
  <div class="slider">
    <!-- <img alt="Vue logo" src="../assets/Aatrox.png"> -->
    <my-slider style="width:400px;height:500px;"
    :list="list"   // 图片地址
    :auto="2000"   // 自动轮播时间间隔
    :curIdx="curIdx"// 图片的下标
    @click="hClick"> // 点击的是第几张图片
    </my-slider>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Slider',
  data () {
    return {
      curIdx: 0,
      list: [{ url: require('../assets/Aatrox.png'), alt: '1.肖申克的救赎' },
        { url: require('../assets/Alistar.png'), alt: '2.阿甘正传' },
        { url: require('../assets/Anivia.png'), alt: '3.幸福来敲门' },
        { url: require('../assets/Annie.png'), alt: '4.这个杀手不太冷' },
        { url: require('../assets/ari.png'), alt: '5.机器人总动员' },
        { url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584438531340&di=0c69fbc0d55171aa8a1d2d107c3f7c87&imgtype=0&src=http%3A%2F%2Fimg21.mtime.cn%2Fpi%2F2011%2F01%2F12%2F134106.88324738_1000X1000.jpg', alt: '5.机器人总动员' }]
    }
  },
  methods: {
    slider () {
      console.log('该变量')
    },
    hClick (idx) {
      console.log('点击了第' + idx)
    }
  }
}
```
### headline
类似于h1、h2 、h3、 h4的标签组件
```
<my-headline :level="1" icon="user" size="mini">
      标题
      <div slot="sub">子标题</div>
</my-headline>
```

### dialog
弹窗组件
```
<h1>测试my-dialog</h1>
    <button type="primary" @click="isShow = !isShow">切换显示</button>
    <my-dialog
    v-model="isShow"
    title="hehe" // 标题信息
    >
    <div slot="body">
      <p>这里我的是内容</p>

    </div>
    </my-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  data () {
    return {
      isShow: false // 弹出框是否显示
    }
  }
}
</script>
```

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