All Projects → JeromeLin → Zarm Web

JeromeLin / Zarm Web

Licence: mit
基于 React 的桌面端UI组件库

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Zarm Web

Canvas Datagrid
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
Stars: ✭ 798 (+491.11%)
Mutual labels:  component, web-component
Toggle Switch React Native
Toggle Switch React Native Component works on both iOS and Android
Stars: ✭ 131 (-2.96%)
Mutual labels:  component
Sun
Android-Sun-Framework 模块化开发框架
Stars: ✭ 123 (-8.89%)
Mutual labels:  component
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-5.93%)
Mutual labels:  component
Ngx Lite
📦 A collection of lightweight Angular libraries in a single mono repo
Stars: ✭ 125 (-7.41%)
Mutual labels:  component
Error Message
📋 Error message component
Stars: ✭ 129 (-4.44%)
Mutual labels:  component
Cypress React Selector
⚡️ cypress plugin to locate react elements by component, props and state
Stars: ✭ 121 (-10.37%)
Mutual labels:  component
Aura.filter
Validate and sanitize arrays and objects.
Stars: ✭ 134 (-0.74%)
Mutual labels:  component
React Dplayer
react-dplayer
Stars: ✭ 130 (-3.7%)
Mutual labels:  component
Vue Blu
UI Component Library Base on Vue.js(2.x) and Bulma
Stars: ✭ 1,593 (+1080%)
Mutual labels:  component
Property Info
PropertyInfo extracts information about PHP class' properties using metadata of popular sources.
Stars: ✭ 1,747 (+1194.07%)
Mutual labels:  component
React Native Gifted Chat
💬 The most complete chat UI for React Native
Stars: ✭ 11,339 (+8299.26%)
Mutual labels:  component
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (-4.44%)
Mutual labels:  component
Thorui Uniapp
ThorUI组件库,轻量、简洁的移动端组件库。组件文档地址:https://thorui.cn/doc/ 。 最近更新时间:2021-10-01
Stars: ✭ 1,842 (+1264.44%)
Mutual labels:  component
Autoresponsive Vue
Auto responsive grid layout library for Vue.
Stars: ✭ 132 (-2.22%)
Mutual labels:  component
Vue Create Root
🍭 不到1kb的小工具, 把组件变成this.$xxx命令.
Stars: ✭ 123 (-8.89%)
Mutual labels:  component
React Modal Box
React Modal Box, is a simple dependency free and customizable React Component to display Modals on your application. Its simple event system allows you to place the modal in the root component of your application, and calling it with the simple mixins, allows you to be flexible. It also includes event handling mixins, so you can detect when the modal is being called or being hidden.
Stars: ✭ 126 (-6.67%)
Mutual labels:  component
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-5.93%)
Mutual labels:  component
Tagger
Zero Dependency, Vanilla JavaScript Tag Editor
Stars: ✭ 135 (+0%)
Mutual labels:  component
Redux Tooltip
A tooltip React component for Redux.
Stars: ✭ 134 (-0.74%)
Mutual labels:  component

Zarm-Web

Build Status FOSSA Status Coverage Status npm package NPM downloads JS gzip size CSS gzip size Netlify Status

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

Zarm 是其移动端版本的实现。

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

安装

使用 npm 或 yarn 安装(推荐)

# npm
npm install [email protected] --save

# yarn
yarn add [email protected]

或者通过 link 和 script 标签分别引入样式文件和js脚本文件(不推荐)

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

使用

全组件引入

import { Button, Input } from 'zarm-web';
import 'zarm-web/dist/zarm-web.min.css';

按需加载

注意:zarm-web 默认支持基于 ES module 的 tree shaking,不使用以下插件也会有按需加载的效果。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ['import', {
        libraryName: 'zarm-web',
        style: true,  // or 'css'
      }],
    ]
  }
import { Button, Cell } from 'zarm-web';
  • 手动引入
import Button from 'zarm-web/lib/button';
import 'zarm-web/lib/button/style/css'; // 加载css
// import 'zarm-web/lib/button/style'; // 加载scss

定制主题

通过修改css变量定义达到定制主题的效果

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

变量名可参考 variable.scss

社区

issue
github issue

开源协议

MIT

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].