# yzlight-ui

> ```javascript npm i yzlight-ui

Latest version **0.1.1** (published 2022-05-11) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-05-11 |
| First published | 2022-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yzl0811 |

## Links

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

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [yzlight-ui](https://npm.io/package/yzlight-ui.md) ^0.0.1

## Recent versions

- 0.1.1 (latest) — 2022-05-11
- 0.0.1 — 2022-05-10

## README

#  安装组件库

```javascript
npm i yzlight-ui

// 在main.js中

import yzlight from "yzlight-ui"

import "../node_modules/yzlight-ui/light-ui.css"

Vue.use(yzlight)
```

##  开关

使用方法

```html
<mySwitch v-model="open" active-color="#13ce66" inactive-color="#c0c0c0" :width="60"></mySwitch>
```

```js
data() {
		return {
			open: false,
		};
	},
```

属性介绍

| 参数          | 说明     | 类型    | 可选值       | 默认值   |
| ------------- | -------- | ------- | ------------ | :------- |
| value         | 开关状态 | Boolean | true / false | false    |
| activeColor   | 底色     | String  | -            | \#13ce66 |
| inactiveColor | 滑块颜色 | String  | -            | \#c0c0c0 |

##  评分

使用方法

```html
<myRate :max="5" v-model="value" active-color="#a8a8a8" inactive-color="#fa9600" text-color="orangered"></myRate>
```

```javascript
data() {
		return {
			value: 0,
		};
	},
```

属性介绍

| 参数           | 说明             | 类型   | 可选值 | 默认值    |
| -------------- | ---------------- | ------ | ------ | --------- |
| :max           | 星星的数量       | Number | -      | 5         |
| active-color   | 未选中的星星颜色 | String | -      | #a8a8a8   |
| inactive-color | 选中的星星颜色   | String | -      | #fa9600   |
| text-color     | 文字颜色         | String | -      | orangered |



##  滑动条

使用方法

```html
<my-slider v-model="progress" :min="0" :max="100"></my-slider>
```

```javascript
	data() {
		return {
			progress: 0,
		};
	},
```

属性介绍

| 参数 | 说明   | 类型   | 可选值 | 默认值 |
| ---- | ------ | ------ | ------ | ------ |
| :min | 最小值 | Number | —      | 0      |
| :max | 最大值 | Number | —      | 100    |

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