# zebra-ui

**Repository Path**: pywu/zebra-ui

## Basic Information

- **Project Name**: zebra-ui
- **Description**: 基于uniapp并实现多端兼容。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://zebraui.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-07-30
- **Last Updated**: 2025-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img alt="logo" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/logo.png" width="220" style="margin-bottom: 10px;">
</p>
<h1 align="center">ZebraUI</h1>

<p align="center">基于uniapp，使用vue3 + ts + setup 的多端兼容组件库。</p>

<p align="center">
	🔥 <a href="https://zebraui.com/">文档网站</a>
	&nbsp;
	&nbsp;
	🚀 <a href="https://swiper.zebraui.com/" target="_blank">zebraSwiper</a>
</p>

## 介绍

[zebra-ui](https://zebraui.com/) 是基于uniapp开发的一款移动端组件库，旨在多端实现统一的代码风格及页面交互。

组件库使用 `vue3` `ts` `setup` `组合式api` 编写。

在保证多端兼容的情况下，使开发者在面对大型项目且需要多人长期维护的场景下，能够更规范，更严谨的进行代码编写，同时提高团队整体开发效率。

## 特性

- 🚀 70+ 个高质量组件，覆盖移动端主流场景
- 🔨 兼容多端，在进行跨多端开发时，可实现风格统一。
- 🎨 可自定义主题，每个组件提供90%+可用样式变量。
- 🎨 支持深色模式，示例项目提供深色模式适配。
- ⚡️ 使用`vue3` `ts` `setup`主流开发方式。
- 📚 覆盖全部组件的示例项目及使用文档。

## 预览

<div>
	<img alt="wx" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/source/weixin.jpg" width="200" />
	<img alt="h5" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/source/h5.png" width="200" style="margin-left:30px;" />
</div>

## 项目截图

<div style="margin-top:30px;">
	<img alt="image" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/source/Multiple_2.png" width="100%" />
</div>

<div>
	<img alt="image" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/source/Multiple_3.png" width="100%" />
</div>

## 示例项目

以下是 ZebraUI 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。

- [demo-normal](https://github.com/zebra-ui/zebra-ui/tree/master/demos/demo-normal)：此示例项目使用 `HbuilderX` 创建应用，通过 `uni_modules` 引入zebra-ui。
- [demo-cli](https://github.com/zebra-ui/zebra-ui/tree/master/demos/demo-cli)：此示例项目使用 `VSCode` 创建应用，通过 `pnpm` 引入zebra-ui。

## 文档网站

访问文档网站查看组件库使用方法。

- [zebra-ui](https://zebraui.com/)
- [zebra-ui-github](https://github.zebraui.com/) github-page备用网站

## Zebra 生态

由 Zebra 官方维护的项目

- [zebra-swiper](https://swiper.zebraui.com/) 基于uniapp，适配多端的高度自定义轮播组件
- [zebra-color](https://color.zebraui.com/) 全端兼容的轻量级颜色选择器。

## 贡献指南

`zebra-ui`目前处于初期，欢迎提交[pr](https://github.com/zebra-ui/zebra-ui/pulls)给我们。

如果在使用过程中遇到问题，可通过提交[issues](https://github.com/zebra-ui/zebra-ui/issues)方式反馈。

如果你对开源或者`zebra-ui`感兴趣，欢迎加入`zebra`团队。

## 交流群

QQ群：947159437 [点击加入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=j0ofK9kA3Um4GXM3mdu0SNFUCOPTapGK&authKey=C%2Fr2jznrkjfCNen37FXpfR30fXpz2piJVCHkDTLHepAoq5OtZxtKXHJc%2BCZ77qFF&noverify=0&group_code=947159437)

<img alt="image" src="https://assets-1256020106.file.myqcloud.com/zebra-ui/source/zebra-qq-code.jpg" width="300px" />