ホーム>PHPソースコード>その他のカテゴリー
ダウンロード

リアクト ダッシュボード プロ

すぐに使えるワンストップダッシュボードソリューション

わずか数ステップで動的ダッシュボード機能を実現

「Thousands of People, Thousands of Faces」のB面でほぼ使われている、ダッシュボード+ウィジェットのカスタマイズニーズを解決します。

箱から出してすぐに使えるワンストップのダッシュボード ソリューション

わずか数ステップで動的なダッシュボード機能を実現

「数千人」のダッシュボード + ウィジェットのカスタマイズ ニーズを解決します。

リポジトリオープングラフテンプレートのコピー

リポジトリ

https://github.com/yuanguandong/react-dashboard-pro

ドキュメント

https://yuanguandong.github.io/react-dashboard-pro/

デモ

インストール

npm i react-dashboard-pro -S

ウィジェットをダウンロード

npm i widgets-cli -D
npx widgets-cli

ウィジェットストア

https://yuanguandong.github.io/react-widgets/

使用法

 import React , { useState } from 'react' ;
import type { LayoutsIF } from 'react-dashboard-pro' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const [ layout , setLayout ] = useState < LayoutsIF > ( [ ] ) ;
  const onLayoutChange = ( layout : LayoutsIF ) => {
    setLayout ( layout ) ;
  } ;
  return (
    < Dashboard
      widgets = { allWidgets }
      onLayoutChange = { onLayoutChange }
      layout = { layout }
    />
  ) ;
} ;

小道具

財産説明タイプデフォルト値必須
ウィジェットアプレット オブジェクトのオプションのコレクション{ [キー: 文字列]:ウィジェット}真実
編集モードステータスを編集するかどうかブール値間違い間違い
デフォルトレイアウトデフォルトのレイアウトレイアウト項目[] []間違い
ウィジェットラップクラス名ウィジェットコンテナクラス名弦間違い
ウィジェットラップスタイルウィジェットコンテナスタイルReact.CSSProperties間違い
レイアウトレイアウトデータレイアウト項目[]ヌル間違い
最小高さ最低高さ番号300間違い
maxWidgetLength現在のダッシュボードに追加できるウィジェットの最大数番号20間違い
ツールバーデフォルトのツールバーを表示するかどうか{タイプ: '左' | '上' | '下' |真実間違い
ストレージキーローカルに保存された一意の識別子ブール値'デフォルト'間違い
onLayoutChangeレイアウト変更コールバック(レイアウト: LayoutsIF) => void間違い
オンリセットクリアボタンのコールバック(dirtyCurrentLayout: LayoutsIF、currentLayout: LayoutItem) => void間違い
onRemoveウィジェットアプレットのコールバックを削除する(ウィジェット: WidgetIF、dirtyCurrentLayout: LayoutsIF、currentLayout: LayoutsIF) => void間違い
onAddWidgetミニプログラムにコールバックを追加する(ウィジェット: WidgetIF、dirtyCurrentLayout: LayoutsIF、currentLayout: LayoutsIF) => void間違い
リロード時更新ボタンのコールバック(currentLayout: LayoutsIF) => void間違い
キャンセル編集編集コールバックのキャンセル(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => void間違い
編集時編集コールバックを入力します(currentLayout: LayoutsIF) => void間違い
保存中保存ボタンのコールバック(currentLayout: LayoutsIF) => void間違い
onRevert復元ボタンのコールバック(dirtyCurrentLayout: LayoutsIF、currentLayout: LayoutItem) => void間違い

ウィジェット

ウィジェットは任意の開いたコンテンツにすることができ、自由に展開できます。ウィジェットを記述するオブジェクトの形式は次のとおりです。

デフォルトのウィジェットは基本的に antd 以下に依存します。依存関係のインストールに注意してください。

財産説明タイプデフォルト値必須
名前ミニプログラム名弦真実
説明ミニプログラムの説明弦真実
タグミニプログラムセレクターの分類基準として使用されるタグ弦[]真実
成分ミニプログラムコンポーネントコンポーネント|機能コンポーネント真実
構成コンポーネントミニプログラムに対応する構成部品コンポーネント | 関数コンポーネント |真実
最大長さこのアプレットを現在のダッシュボードに追加できる最大回数番号真実
スナップショットミニプログラムのスナップショット画像。ミニプログラムセレクターの表示に使用されます。画像ビットマップソース真実
アイコンミニ プログラム アイコン。ミニ プログラム セレクターの表示に使用されます。反応要素真実
アイコン背景ミニ プログラム アイコンの背景、ミニ プログラム セレクターの表示に使用されます。弦真実
サイズミニプログラムのサイズ情報{デフォルト幅: 数値;デフォルト高さ: 数値;最大幅: 数値;最大高さ: 数値;最小幅: 数値;最小高さ: 数値}真実
 // todo/index.tsx
import { CalendarOutlined } from '@ant-design/icons' ;
import Panel from './component' ;
import snapShot from './snapshot.png' ;

export default {
  name : 'Todo' ,
  description : 'todo list' ,
  tags : [ 'all' , 'list' ] ,
  component : Panel ,
  configComponent : null ,
  maxLength : 2 ,
  snapShot ,
  icon : < CalendarOutlined /> ,
  iconBackground : 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)' ,
  size : {
    defaultWidth : 3 ,
    defaultHeight : 11 ,
    maxWidth : 12 ,
    maxHeight : 16 ,
    minWidth : 2 ,
    minHeight : 4 ,
  } ,
}
// **/**.index ……

// widgets/index.tsx
import clock from './clock' ;
import column from './column' ;
import guide from './guide' ;
import popular from './popular' ;
import ring from './ring' ;
import todo from './todo' ;

export default { clock , guide , popular , todo , column , ring } ;

レイアウト

一般に、レイアウト情報は、リアルタイムでダッシュボード レイアウト データを取得する場合 (たとえば、デフォルト レイアウトを設定する場合)、シリアル化して文字列形式で保存するだけで十分です。ダッシュボードで、ショートカット キー Ctrl+Shift+C を押してレイアウト データをクリップボードにコピーすると、コンソール パネルにもレイアウト データが印刷されます。

財産説明タイプデフォルト値必須
私ミニ プログラムの一意の識別子で始まり、その後にアンダースコアが続く一意の識別子 (「widgetKey-1234567」など)弦真実
w横コピー枚数 計12枚番号真実
h高さのコピー枚数、1コピーは約30px番号真実
×横置き、計12部番号真実
y縦位置、1部は約30px番号真実
分W最小幅番号真実
最大W最大幅番号真実
h最低高さ番号真実
最大H最大高さ番号真実
 export default [
  {
    w : 3 ,
    h : 16 ,
    x : 0 ,
    y : 0 ,
    i : 'Popular-81735522335293475546087951289435' ,
  } ,
  {
    w : 3 ,
    h : 11 ,
    x : 3 ,
    y : 5 ,
    i : 'Todo-53084247679600442035440807237732' ,
  }
]

方法

コンポーネントのインスタンスは ref を通じて取得できます。一部のメソッドと dom オブジェクトはインスタンス オブジェクトにマウントされており、カスタマイズされた Toolbar と WidgetSelector を簡単に拡張できます。

財産説明タイプ
ドムDOMオブジェクトHTMLDiv要素
ウィジェットを追加アプレットの追加(ウィジェット)=>無効
ウィジェットを削除するアプレットの削除(i:widgetKey)=>void
リロードリフレッシュする()=>空
編集編集を入力してください()=>空
キャンセル編集編集をキャンセルする()=>空
元に戻すリセット()=>空
保存保存()=>空
 import React , { useRef } from 'react' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const ref = useRef ( )
  const addWidget = ( ) => {
    ref . current . addWidget ( 'Todo-1234567' )
  }
  return ( < >
      < Dashboard
        ref = { ref }
        widgets = { allWidgets }
      />
      < button onClick = { addWidget } >新增</ button >
    </ >
  ) ;
} ;

藤堂

✅ 構成パネル

☑️ギャップ

☑️ モダンなテーマ

☑️ ダークテーマ

☑️その他のウィジェット

✅ ウィジェット-cli

☑️国際化

終わり

  • どなたでも問題提起を歓迎します。ご要望があれば、できる限り対応させていただきます。
  • 皆様に安心してご利用いただけるよう、今後もこのプロジェクトを維持してまいります

役に立ったと思われる場合は、星を付けてください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて