Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zhongantech/zarm

基于 React 的移动端 UI 组件库
https://github.com/zhongantech/zarm

components css javascript mobile react react-components zarm

Last synced: 29 days ago
JSON representation

基于 React 的移动端 UI 组件库

Awesome Lists containing this project

README

        





Zarm

[![test](https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml/badge.svg)](https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml)
[![codecov](https://codecov.io/gh/ZhongAnTech/zarm/branch/master/graph/badge.svg?token=Qqne6VfWnk)](https://codecov.io/gh/ZhongAnTech/zarm)
[![npm package](https://img.shields.io/npm/v/zarm/latest.svg)](https://www.npmjs.org/package/zarm)
![JS gzip size](https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.js?compression=gzip&label=zarm.min.js)
![CSS gzip size](https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.css?compression=gzip&label=zarm.min.css)
[![NPM downloads](https://img.shields.io/npm/dm/zarm.svg)](https://npmjs.org/package/zarm)
[![Netlify Status](https://api.netlify.com/api/v1/badges/7afc45a9-dcac-4475-9903-d3896bc200ed/deploy-status)](https://app.netlify.com/sites/zarm/deploys)
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_shield)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ZhongAnTech/zarm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

众安科技基于 React 研发的一款适用于企业级的移动端 UI 组件库。

Zarm (读音 /zɑːm/,中文可发音为 扎姆)的命名,灵感来源于众安保险秉承的理念:做有温度的保险。Zarm = za + warm,za 代表 “众安”,warm 有 “温暖” 的含义,以重合的 “a” 字母为中心,各取左右两部分。追求极致的用户体验,致力于做有温度的组件库也是 zarm 项目发起的初衷。

## 预览

[https://zarm.design/demo.html#/](https://zarm.design/demo.html#/)

## 兼容性

- iOS Safari 10+
- Android 5+

如需兼容更低端的浏览器版本,需要提供相应的 Polyfill 支持,请参考 [这篇文章](https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/polyfill.md)

## 安装

npm 或 yarn 安装

```bash
# npm
$ npm install zarm --save

# yarn
$ yarn add zarm
```

## 使用

```js
import { Button, Cell } from 'zarm';
import 'zarm/dist/zarm.css';
```

## 定制主题

可以参考 [定制主题文档](https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/customize-theme.md)。

## 国际化

可以参考 [国际化文档](https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/i18n.md)。

## 社区

| 问题上报 | 讨论交流 | 微信群 |
| :---------------------------------------------------------- | :-------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
| [github issues](https://github.com/ZhongAnTech/zarm/issues) | [github discussions](https://github.com/ZhongAnTech/zarm/discussions) |
备注 "zarm" 加好友后邀请进群 |

## 如何贡献

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。

你可以使用 Gitpod 进行在线开发:

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ZhongAnTech/zarm)

或者克隆到本地开发,请阅读我们的 [贡献指南](https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/contributing.md)。

## 开源协议

MIT

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_large)