Mobile UI component library based on React and React-Native

Based on React and React-Native, ZhongAn Technology develops an enterprise-level mobile UI component library.

The naming of Zarm is inspired by the philosophy of ZhongAn Insurance: to make insurance with temperature. Zarm = za + warm, za stands for “Zhongan”, warm has the meaning of “warm”, with the overlapping a letter as the center, each takes the left and right parts. Pursuing the ultimate user experience and devoting to building a temperature-sensitive component library is also the original intention of the zarm project.

version

• 

Browser support

• iOS
• Android 4.0+

installation

Install using npm or yarn (recommended)

## npm
npm install zarm --save

## yarn
yarn add zarm

Or import style files and js script files through link and script tags respectively (not recommended)

<link rel="stylesheet" href="https://unpkg.com/zarm/dist/zarm.min.css">
<script type="text/javascript" src="https://unpkg.com/zarm/dist/zarm.min.js"></script>

use

Full component introduction

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

Load on demand

Note: zarm supports tree shaking based on ES module by default, and it will have the effect of loading on demand without using the following plugins.

• Use babel-plugin-import to automatically load Sass files (recommended)

  // .babelrc or babel-loader option
  {
    "plugins": [
      ['import', {
        libraryName: 'zarm',
        style: true, // or 'css'
      }],
    ]
  }
import { Button, Cell } from 'zarm';

• Manual introduction

Import  the Button  from  'Zarm / lib / Button' ;  // loading JS 
Import  'Zarm / lib / Button / style / CSS' ;  // loading CSS 
// Import 'Zarm / lib / Button / style'; // loading scss

Custom theme

Customize the theme by modifying the definition of css variables

document.documentElement.style.setProperty('--theme-primary', '#108ee9');

Variable name can refer to default.scss

Download Details:

Author: ZhongAnTech

Demo: https://zarm.design/#/

Source Code: https://github.com/ZhongAnTech/zarm

#react-native #react #mobile-apps