<p align="center">
	<img alt="logo" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-color/title.png" width="320" style="margin-bottom: 10px;">
</p>

<h1 align="center">ZebraColor</h1>

<p align="center">全端兼容的轻量级颜色选择器。</p>

<p align="center">
	🔥 <a href="https://color.zebraui.com/">zebraColor文档</a>
</p>

<p align="center">
	🚀 <a href="https://swiper.zebraui.com/">zebraSwiper轮播</a>
	&nbsp;
	&nbsp;
	🚀 <a href="https://zebraui.com/" target="_blank">zebraUI组件库</a>
</p>

## 介绍

zebraColor是一款兼容全端的颜色选择器，通常用于自定义颜色的场景。

## 特性

- 全端兼容
- 微信小程序使用`wxs`，支付宝小程序使用`sjs`，滑动选择颜色时丝滑无卡顿。

## 安装

### npm方式

```bash
npm i @zebra-ui/color
```

```js
// pages.json

{
	"easycom": {
		"^zebra-(.*)": "@zebra-ui/color/components/zebra-$1/zebra-$1.vue"
	},
	"pages": [...],
	"globalStyle": {...}
}
```

### uni_modules方式

[插件市场](https://ext.dcloud.net.cn)直接导入即可

## 手机预览

<div>
	<img alt="h5" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-color/code.png" style="width:200px;margin-top:20px;"  />
</div>

## 预览
<div style="display:flex;flex-wrap:wrap;margin-top:30px;">
 <img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-color/zebra-color-preview-gif.gif" width="320" style="margin:20px;" />
</div>

## 群

QQ群：947159437

![image](https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/zebra-swiper-group-code.png)