首页
/ Zarm-Web 开源项目教程

Zarm-Web 开源项目教程

2024-09-19 02:53:57作者:宣聪麟

1、项目介绍

Zarm-Web 是众安科技基于 React 研发的一款适用于企业级的桌面端 UI 组件库。它是 Zarm 移动端版本的延伸,旨在提供一套稳定、美观且易用的界面元素,帮助开发者快速构建专业级别的桌面应用。Zarm-Web 的命名灵感来源于众安保险的理念:做有温度的保险,因此它不仅仅是一组工具,更是一个关注用户体验,希望带给用户贴心感受的框架。

2、项目快速启动

安装

推荐使用 npm 或 yarn 进行安装:

# 使用 npm 安装
npm install zarm-web@alpha --save

# 使用 yarn 安装
yarn add zarm-web@alpha

使用

全组件引入

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 }]
  ]
}
import { Button } 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

3、应用案例和最佳实践

Zarm-Web 适用于各种企业级应用场景,如金融、医疗、教育等领域。其丰富的组件库涵盖了按钮、输入框、表单、导航、提示等多种基础和高级组件,满足从简单到复杂的各种界面设计需求。无论是构建管理后台还是客户门户,Zarm-Web 都能助您一臂之力。

最佳实践

  1. 定制主题:通过修改 CSS 变量定义达到定制主题的效果。

    document.documentElement.style.setProperty('--theme-primary', '#108ee9');
    
  2. 按需加载:使用 babel-plugin-import 插件按需引入组件及其对应的样式资源,优化页面性能。

4、典型生态项目

Zarm-Web 作为 Zarm 桌面端版本的实现,与 Zarm 移动端版本形成了良好的生态互补。Zarm 移动端版本已经在业界广受好评,Zarm-Web 的推出进一步完善了众安科技在前端组件库领域的布局。

相关项目

  • Zarm Design:众安科技的移动端组件库,与 Zarm-Web 共同构成了众安科技在前端组件库领域的完整解决方案。
  • React:Zarm-Web 基于 React 技术栈,充分利用了 React 的组件化开发优势。

通过这些项目的结合使用,开发者可以构建出更加丰富和多样化的应用界面,提升用户体验。

登录后查看全文
热门项目推荐