JeromeLin / Zarm Web
Licence: mit
基于 React 的桌面端UI组件库
Stars: ✭ 135
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
Ngx Lite
📦 A collection of lightweight Angular libraries in a single mono repo
Stars: ✭ 125 (-7.41%)
Mutual labels: component
Cypress React Selector
⚡️ cypress plugin to locate react elements by component, props and state
Stars: ✭ 121 (-10.37%)
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
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
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
Zarm-Web
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,不使用以下插件也会有按需加载的效果。
- 使用 babel-plugin-import 自动加载Sass文件(推荐)
// .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
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].