react dashboard pro
v1.0
Dynamische Dashboard-Funktionalität in nur wenigen einfachen Schritten
Es löst die Anpassungsanforderungen von Dashboard + Widget, die fast von der B-Seite von „Thousands of People, Thousands of Faces“ verwendet werden.
Erhalten Sie in nur wenigen einfachen Schritten dynamische Dashboard-Funktionen
Es erfüllt die Dashboard- und Widget-Anpassungsanforderungen von „Tausenden von Menschen“.
https://github.com/yuanguandong/react-dashboard-pro
https://yuanguandong.github.io/react-dashboard-pro/
npm i react-dashboard-pro -Snpm i widgets-cli -D
npx widgets-clihttps://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 }
/>
) ;
} ; | Eigentum | Beschreibung | Typ | Standardwert | erforderlich |
|---|---|---|---|---|
| Widgets | Optionale Sammlung von Applet-Objekten | { [key: string]:widget} | WAHR | |
| editMode | Ob der Status bearbeitet werden soll | Boolescher Wert | FALSCH | FALSCH |
| defaultLayout | Standardlayout | layoutItem[] | [] | FALSCH |
| widgetWrapClassName | Name der Widget-Containerklasse | Zeichenfolge | FALSCH | |
| widgetWrapStyle | Widget-Container-Stil | React.CSSProperties | FALSCH | |
| Layout | Layoutdaten | layoutItem[] | null | FALSCH |
| minHöhe | Mindesthöhe | Nummer | 300 | FALSCH |
| maxWidgetLength | Die maximale Anzahl von Widgets, die dem aktuellen Dashboard hinzugefügt werden können | Nummer | 20 | FALSCH |
| Symbolleiste | Ob die Standardsymbolleiste angezeigt werden soll | {Typ: 'links' |. 'oben' |. 'unten'; | WAHR | FALSCH |
| Speicherschlüssel | Lokal gespeicherte eindeutige Kennung | Boolescher Wert | 'Standard' | FALSCH |
| onLayoutChange | Rückruf zur Layoutänderung | (Layout: LayoutsIF) => ungültig | FALSCH | |
| onReset | Rückruf der Schaltfläche löschen | (dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void | FALSCH | |
| onRemoveWidget | Löschen Sie den Rückruf des Applets | (Widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void | FALSCH | |
| onAddWidget | Fügen Sie dem Miniprogramm einen Rückruf hinzu | (Widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void | FALSCH | |
| onReload | Rückruf der Schaltfläche „Aktualisieren“. | (currentLayout: LayoutsIF) => void | FALSCH | |
| onCancelEdit | Bearbeitungsrückruf abbrechen | (dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void | FALSCH | |
| onEdit | Geben Sie den Bearbeitungsrückruf ein | (currentLayout: LayoutsIF) => void | FALSCH | |
| onSave | Rückruf mit der Schaltfläche „Speichern“. | (currentLayout: LayoutsIF) => void | FALSCH | |
| onRevert | Rückruf der Schaltfläche „Wiederherstellen“. | (dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void | FALSCH |
Ein Widget kann ein beliebiger offener Inhalt sein und kann frei erweitert werden. Die Eintragsdatei muss ein Objekt exportieren, um das Widget zu beschreiben. Weitere Widgets finden Sie hier
Die Standard-Widgets basieren grundsätzlich auf antd und weniger. Achten Sie auf die Installation von Abhängigkeiten.
| Eigentum | Beschreibung | Typ | Standardwert | erforderlich |
|---|---|---|---|---|
| Name | Mini-Programmname | Zeichenfolge | WAHR | |
| Beschreibung | Mini-Programmbeschreibung | Zeichenfolge | WAHR | |
| Tags | Tags, die als Klassifizierungsbasis für Mini-Programmselektoren verwendet werden | string[] | WAHR | |
| Komponente | Mini-Programmkomponente | Komponente|FunktionKomponente | WAHR | |
| configComponent | Konfigurationskomponenten entsprechend dem Miniprogramm | Komponente |. Funktionskomponente | | WAHR | |
| maxLength | Die maximale Häufigkeit, mit der dieses Applet zum aktuellen Dashboard hinzugefügt werden kann | Nummer | WAHR | |
| Schnappschuss | Mini-Programm-Schnappschussbild, das für die Anzeige der Mini-Programmauswahl verwendet wird | ImageBitmapSource | WAHR | |
| Symbol | Mini-Programmsymbol, wird für die Anzeige der Mini-Programmauswahl verwendet | ReactElement | WAHR | |
| iconHintergrund | Hintergrund des Mini-Programmsymbols, wird für die Anzeige der Mini-Programmauswahl verwendet | Zeichenfolge | WAHR | |
| Größe | Informationen zur Miniprogrammgröße | {defaultWidth: Zahl;defaultHeight: Zahl;maxWidth: Zahl;maxHeight: Zahl;minWidth: Zahl;minHeight: Zahl} | WAHR |
// 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 } ;
Im Allgemeinen muss den Layoutinformationen nicht viel Aufmerksamkeit geschenkt werden. Sie müssen lediglich serialisiert und in Zeichenfolgenform gespeichert werden. Wenn Sie die Dashboard-Layoutdaten in Echtzeit abrufen möchten (z. B. beim Festlegen des Standardlayouts). Sie können den Fokus (Mausklick) auf das entsprechende Element richten. Drücken Sie im Dashboard die Tastenkombination Strg+Umschalt+C, um die Layoutdaten in die Zwischenablage zu kopieren. Das Konsolenfenster druckt die Layoutdaten ebenfalls aus.
| Eigentum | Beschreibung | Typ | Standardwert | erforderlich |
|---|---|---|---|---|
| ich | Eindeutiger Bezeichner, beginnend mit dem eindeutigen Bezeichner des Miniprogramms, gefolgt von einem Unterstrich, z. B. „widgetKey-1234567“. | Zeichenfolge | WAHR | |
| w | Anzahl der Breitenexemplare, insgesamt 12 Exemplare | Nummer | WAHR | |
| H | Anzahl der Kopien in der Höhe, 1 Kopie hat etwa 30 Pixel | Nummer | WAHR | |
| X | Horizontale Position, insgesamt 12 Kopien | Nummer | WAHR | |
| j | Hochformat, 1 Kopie hat etwa 30 Pixel | Nummer | WAHR | |
| minW | Mindestbreite | Nummer | WAHR | |
| maxW | maximale Breite | Nummer | WAHR | |
| H | Mindesthöhe | Nummer | WAHR | |
| maxH | maximale Höhe | Nummer | WAHR |
export default [
{
w : 3 ,
h : 16 ,
x : 0 ,
y : 0 ,
i : 'Popular-81735522335293475546087951289435' ,
} ,
{
w : 3 ,
h : 11 ,
x : 3 ,
y : 5 ,
i : 'Todo-53084247679600442035440807237732' ,
}
] Die Komponenteninstanz kann über ref abgerufen werden. Einige Methoden und Dom-Objekte werden auf dem Instanzobjekt bereitgestellt, wodurch die benutzerdefinierte Symbolleiste und der WidgetSelector problemlos erweitert werden können.
| Eigentum | Beschreibung | Typ |
|---|---|---|
| dom | DOM-Objekt | HTMLDivElement |
| addWidget | Applet hinzufügen | (Widget)=>nichtig |
| RemoveWidget | Applet löschen | (i:widgetKey)=>void |
| neu laden | auffrischen | ()=>void |
| bearbeiten | Geben Sie Bearbeiten ein | ()=>void |
| abbrechenBearbeiten | Bearbeitung abbrechen | ()=>void |
| zurücksetzen | zurücksetzen | ()=>void |
| speichern | speichern | ()=>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 >
</ >
) ;
} ; ✅ configPanel
☑️ Lücke
☑️ modernes Thema
☑️ dunkles Thema
☑️ weitere Widgets
✅ Widget-Cli
☑️Internationalisierung
Wenn Sie es nützlich finden, geben Sie ihm bitte einen Stern.
