哈喽，大家好，我是開源君，一個資深的網際網路玩家，緻力于為大家分享各領域優質開源項目。
今天開源君給大家推薦的項目是
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