哈喽，大家好，我是开源君，一个资深的互联网玩家，致力于为大家分享各领域优质开源项目。
今天开源君给大家推荐的项目是
quark-design
,一套企业级跨框架 UI 设计语言，底层基于 Web components。
项目特点
- 支持 Vue、React、Angular 等各类框架/无框架。
- 完全覆盖您所需要的各种通用组件。
- 支持按需引用。
- 详尽的文档和示例。
- 单元测试覆盖。
- 支持 TypeScript。
- 支持定制主题。
- 国际化语言支持。
- 支持服务端渲染（Beta）。
项目目标
技术框架的出现，提升了开发体验以页面性能，但技术框架的不断迭代更新，为项目的维护带来诸多挑战，如：
视觉组件无法跨技术框架（React、Vue等）使用 技术框架一旦升级，视觉组件常常必须配合迭代升级 因此，我们开发了这套 UI 框架，旨在与技术框架隔离（技术栈无关），让视觉组件避免落入技术栈迭代而迭代的怪圈。
安装和使用
安装
# Vue/Angular/JQ/无框架工程
npm i quarkd
# React 项目
npm i @quarkd/quark-react 使用
- Vue.x
import "quarkd/lib/button"
<quark-button type="primary">Button</quark-button> - React.x
import { Button } from '@quarkd/quark-react';
const App = () => (
<>
<Button type="primary">Button</Button>
</>
); - Angular
import { Component } from '@angular/core
import "quarkd/lib/button"
@Component({
template: `<quark-button loading="{{loading}}"" (click)="handleClick()">
Button
</quark-button>`
}) - 其它 H5 项目
<!DOCTYPE html>
<html lang="en">
<body>
<quark-button loading="false" id="btn">Button</quark-button>
</body>
<script src="./node_modules/quarkd/lib/button/index.js" /> // or cdn
<script>
window.addEventListener(function() {
const el = document.getElementById('btn')
el.loading = true
setTimeout(() => { el.loading = true }, 2000);
})
</script>
</html> 注意点
由于 quarkd 提供的组件均为原生自定义元素（类比div），因此组件派发的事件需要使用addEventLisener接收。
Vue 技术栈使用 @xx 即可接收原生派发的事件，因此不需要使用addEventLisener接收。
项目地址
https://github.com/hellof2e/quark-design