antd-widgets v1.0.0

Widget フレームワーク

DEMO page

DEMO

インストール方法

ソースから利用する場合は、antd-widget のソースコードをビルド後に、lib フォルダーにあるコードをプロジェクトの参照可能なフォルダーにコピーすれば、利用可能になります。

npm を利用する場合に(パブリックリポジトリに公開する予定)

npm install --save antd-widgets

yarn を利用する場合に(パブリックリポジトリに公開する予定)

yarn install --save antd-widgets

ソースからビルド及びサンプルプロジェクトの確認方法

antd-widgets フォルダーに下記のコマンドを実行し、ビルドします。

yarn install
yarn build

example プロジェクトのフォルダーに移動して、下記のコマンドを実行すれば、サンプルプロジェクトを確認することが可能です。

yarn install
yarn start

widgets の開発（2020/04/21 時点）

widgetLayout

ダッシュボードを構築する際に下記の２つ部品を利用します。

• WidgetLayout 設定された Widget のレイアウトを管理し、画面サイズに応じて Widget のレイアウトを整える機能を提供する。

• Widget Widget フレームを提供し、WidgetLayout に連動し、配置を管理します。

Widget 開発

基本 Widget コンポーネントの Child コンポーネントで表示する項目を React ページとして開発します。 カスタマイズ Widget 例：

<Widget
    title="test"
    className="text"
    extra=""
    id={'8'}
    key={8}
    position={{
        x: 10,
        y: 10,
        w: 6,
        h: 6,
    }}
>
    <h2>Hello world</h2>
</Widget>