tabler react

アップデート - 2019 年 6 月: バージョン 2

アルファ版が NPM で利用可能になりました:

npm install tabler-react@alpha yarn add tabler-react@alpha

最新の進捗状況を確認してこのブランチに参加するか、この問題に関するご意見やリクエストを追加してください。

タブラー・リアクト

Tabler ダッシュボード UI キットの React 実装

デモ|ドキュメント|問題点|たるみ。

インストール

Node.js 8+ と Yarn がインストールされていることを確認してください。

yarn add tabler-react

例

 import React , { Component } from "react" ;

import "tabler-react/dist/Tabler.css" ;

import { Card , Button } from "tabler-react" ;

class MyCard extends Component {
  render ( ) {
    return (
      < Card >
        < Card . Header >
          < Card . Title > Card Title </ Card . Title >
        </ Card . Header >
        < Card . Body >
          < Button color = "primary" > A Button </ Button >
        </ Card . Body >
      </ Card >
    ) ;
  }
}

その他の例とドキュメントについては、デモ Web サイトを参照してください。

貢献する

参加する機会はたくさんあります。傑出したタスクを 1 つ選択し、現在取り組んでいることをお知らせください。ご質問があれば遠慮なくお問い合わせください。

パッケージは 2 つのメイン フォルダーで構成されています。

• /src にはすべての Tabler React コンポーネントが含まれます
• /example は、create-react-app ベースのデモ Web サイトです

ローカル コピーをセットアップして実行するには、次の手順を実行します。

1. git clone https://github.com/tabler/tabler-reactを使用してこのリポジトリのクローンを作成します
2. ルートフォルダーでyarn install実行します
3. サンプルフォルダーでyarn install実行します。
4. 別のターミナル ウィンドウで、ルート フォルダーとサンプル フォルダーでyarn startを実行します。

これで、/src フォルダー内の Tabler React コンポーネントで作業している間、サンプル Web サイトをブラウザーでライブ リロードして実行できるようになります。

変更の作業が完了したら、詳細を記載した PR を送信し、視覚的に何か変更した場合はスクリーンショットを添付します。

ライセンス

MIT © jonthomp、AaronCoplan、および寄稿者。