quark-design - 次世代のフロントエンドコンポーネントライブラリは、任意のフレームワークで使用することも、フレームワークなしで同時に使用することもできます。

(Next generation Frontend component library, it can be used in any framework or no framework at the same time.(下一代前端组件库,它可以同时在任意框架或无框架中使用。))

Created at: 2022-10-14 15:06:46
Language: TypeScript
License: MIT

クォークデザイン

エンタープライズクラスのUIデザイン言語とクロスフレームワークUIライブラリ、Webコンポーネントに基づいています。

お 問い合わせ

Wechat(微信交流/沟通群),欢迎提意见或建议,有机会获取周边礼品🎁~, 若群已满请加右侧微信拉你入群

微信群已满员,请添加下面管理员拉你入群谢谢~

英語|简体中文

モチベーション

技術フレームワークの出現により、開発経験とページパフォーマンスが向上しましたが、技術フレームワークの継続的な反復更新により、プロジェクトのメンテナンスに次のような多くの課題がもたらされました。

  • ビジュアルコンポーネントは、技術的なフレームワーク(React、Vueなど)間で使用することはできません。
  • 技術フレームワークがアップグレードされると、ビジュアルコンポーネントを繰り返しアップグレードする必要があることがよくあります

そのため、このUIフレームワークは、テクノロジーフレームワーク(テクノロジースタックなし)から分離するために開発され、ビジュアルコンポーネントがテクノロジースタックの反復と反復の悪循環に陥らないようにしました。

顔立ち

  • Vue、React、Angular、JQをサポートし、フレームワークプロジェクトはありません
  • 40+ 高品質のコンポーネント
  • サポートツリーシェイキング
  • 90%+ 単体テストのカバレッジ
  • タイプスクリプトで書かれた
  • サポートタイプスクリプト
  • カスタムテーマのサポート
  • i18n、内蔵20 +言語をサポート
コンポーネントライブラリ ティッカー オンデマンドインポート ビルドツール タイプスクリプト オープンソースの時間 サポート技術スタック/フレームワーク
クォーク 80.1キロバイト ロールアップ 2022 Vue/React/Angular/JQ/Svelte/no framework
バント 183キロバイト Vite(Vant-cli) 2017 Vue のみ
ヌトゥイ 275.5キロバイト 勢いよく 2018 Vue のみ
デサインモバイル - 飲む 2021 反応のみ
アントモバイル - 飲む 2016 反応のみ

取り付ける

使用するインストールするには:

npm

# install for Vue/React/Angular/No framework project
npm i quarkd
#  install for React project
npm i @quarkd/quark-react --save

クイックスタート

Vue.x

// 1. Import the components you need
import "quarkd/lib/button"

// 2. Use it
<quark-button type="primary">Button</quark-button>

反応.x

// 1. Import the components you need
import { Button } from '@quarkd/quark-react';

// 2. Use it
const App = () => (
  <>
    <Button type="primary">Button</Button>
  </>
);

角度

// 1. Import the components you need
import "quarkd/lib/button"

// 2. Use it
@Component({
  template: `<quark-button loading="{{loading}}"" (click)="handleClick()">
    Button
  </quark-button>`
})

フレームワークプロジェクトなし

<!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>

カスタムテーマ

カスタムテーマを参照してください。

国際化

数十の言語がサポートされています、ドキュメントを参照してください。

ブラウザのサポート

最新のブラウザーと Internet Explorer 11 (ポリフィルを使用)。

コントリビューションガイド

プルリクエストを行う前に、必ず寄稿ガイドをお読みください。

特記事項

  • によって提供されるコンポーネントはすべてネイティブのカスタム要素 (div に類似) であるため、コンポーネントによって送出されるイベントは addEventListener を使用して受信する必要があります。
    quarkd
  • Vue スタックはネイティブにディスパッチされたイベントを受信するために使用するため、それらを受信するために addEventListener を使用する必要はありません。
    @xx
  • Reactテクノロジースタックの場合、開発者が手動で追加しないようにするためにイベントを受信するためのEventLisenerは、下部に依存し、上位レイヤーをReactify(Reactize)します。したがって、Reactプロジェクトは使用することをお勧めします。
    quarkd
    @quarkd/quark-react

注意を払う

  • Vueプロジェクトの不明なカスタム要素:
<!-- vue2: -->
Unknown custom element: <quark-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<!-- vue3 -->
[Vue warn]: Failed to resolve component: quark-icon 

これは、Vue コンポーネントの構文部分がカスタム要素を参照しているためです。Vueコンポーネントとの競合を避けるために、カスタム要素は無視する必要があります!次のコードをプロジェクトに挿入してください。

// VUE2.x
Vue.config.ignoredElements = [/^quark-/]

// VUE3.x
// https://v3.cn.vuejs.org/guide/migration/global-api.html#config-productiontip-%E7%A7%BB%E9%99%A4
const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('quark-')

vite を使用している場合は、vite.config .jsを変更します。

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('quark-')
        }
      }
    })
  ]
}

貢献

ティッカー
ティッカー
玉海陽1
うん
サンキメッド
サンチー
卓光
卓光
アマデウス711
謝宗陳
c0dedance
C0dedance
Er1c0
Er1c0
高西錦県
コーデルドゥアン
HBF2E
Hbf2e
ホウホズ
ヒザオ
ノヴァアロン
ノヴァアロン
オリーブ風
オリーブ風