react dashboard pro
v1.0
Fonctionnalité de tableau de bord dynamique en quelques étapes simples
Il résout les besoins de personnalisation de Dashboard + Widget, qui sont presque utilisés par la face B de « Des milliers de personnes, des milliers de visages ».
Bénéficiez d'une fonctionnalité de tableau de bord dynamique en quelques étapes simples
Il répond aux besoins de personnalisation du tableau de bord + widget de « des milliers de personnes ».
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 }
/>
) ;
} ; | propriété | description | taper | valeur par défaut | requis |
|---|---|---|---|---|
| widgets | Collection facultative d'objets applet | { [clé : chaîne]: widget} | vrai | |
| mode édition | S'il faut modifier le statut | booléen | FAUX | FAUX |
| mise en page par défaut | disposition par défaut | élément de mise en page[] | [] | FAUX |
| widgetWrapClassName | nom de la classe du conteneur de widgets | chaîne | FAUX | |
| widgetWrapStyle | style de conteneur de widgets | React.CSSPropriétés | FAUX | |
| mise en page | données de mise en page | élément de mise en page[] | nul | FAUX |
| minHauteur | hauteur minimale | nombre | 300 | FAUX |
| maxWidgetLength | Le nombre maximum de widgets pouvant être ajoutés au tableau de bord actuel | nombre | 20 | FAUX |
| barre d'outils | S'il faut afficher la barre d'outils par défaut | {type : 'gauche' | 'droite' | 'haut' | 'bas' ; vitesse : nombre ;} | vrai | FAUX |
| Clé de stockage | Identifiant unique stocké localement | booléen | 'défaut' | FAUX |
| onLayoutChange | Rappel de changement de mise en page | (mise en page : LayoutsIF) => vide | FAUX | |
| surRéinitialiser | Effacer le rappel du bouton | (dirtyCurrentLayout : LayoutsIF, currentLayout : LayoutItem) => void | FAUX | |
| onRemoveWidget | Supprimer le rappel de l'applet | (widget : WidgetIF,dirtyCurrentLayout : LayoutsIF,currentLayout : LayoutsIF) => vide | FAUX | |
| surAjouterWidget | Ajouter un rappel au mini programme | (widget : WidgetIF,dirtyCurrentLayout : LayoutsIF,currentLayout : LayoutsIF) => vide | FAUX | |
| onReload | Rappel du bouton Actualiser | (currentLayout : LayoutsIF) => vide | FAUX | |
| surAnnuler | Annuler le rappel de modification | (dirtyCurrentLayout : LayoutsIF,currentLayout : LayoutItem) => void | FAUX | |
| sur | Entrez le rappel de modification | (currentLayout : LayoutsIF) => vide | FAUX | |
| surEnregistrer | Rappel du bouton Enregistrer | (currentLayout : LayoutsIF) => vide | FAUX | |
| onRevert | Rappel du bouton de restauration | (dirtyCurrentLayout : LayoutsIF, currentLayout : LayoutItem) => void | FAUX |
Un widget peut être n'importe quel contenu ouvert et peut être librement développé. Le fichier d'entrée doit exporter un objet pour décrire le widget. Le format de l'objet est le suivant. Pour plus de widgets, vous pouvez voir ici.
Les widgets par défaut reposent essentiellement sur antd et moins. Faites attention à l'installation des dépendances.
| propriété | description | taper | valeur par défaut | requis |
|---|---|---|---|---|
| nom | Nom du mini-programme | chaîne | vrai | |
| description | Description du mini-programme | chaîne | vrai | |
| balises | Balises, utilisées comme base de classification pour les mini-sélecteurs de programmes | chaîne[] | vrai | |
| composant | Composant mini-programme | Composant | FonctionComponent | vrai | |
| Composant de configuration | Composants de configuration correspondant au mini programme | Composant | FonctionComponent | | vrai | |
| longueurmax | Le nombre maximum de fois que cette applet peut être ajoutée au tableau de bord actuel | nombre | vrai | |
| instantané | Image instantanée du mini-programme, utilisée pour l'affichage du mini-sélecteur de programme | ImageBitmapSource | vrai | |
| icône | Icône de mini-programme, utilisée pour l'affichage du mini-sélecteur de programme | RéagirÉlément | vrai | |
| icôneContexte | Arrière-plan de l'icône du mini-programme, utilisé pour l'affichage du mini-sélecteur de programme | chaîne | vrai | |
| taille | Informations sur la taille du mini-programme | {defaultWidth : numéro;defaultHeight : numéro;maxWidth : numéro;maxHeight : numéro;minWidth : numéro;minHeight : numéro} | vrai |
// 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 } ;
Généralement, il n'est pas nécessaire d'accorder beaucoup d'attention aux informations de mise en page. Il suffit de les sérialiser et de les stocker sous forme de chaîne si vous souhaitez obtenir les données de mise en page du tableau de bord en temps réel (par exemple, lorsque vous souhaitez définir la mise en page par défaut). ), vous pouvez vous concentrer (clic de souris) sur le correspondant. Sur le tableau de bord, appuyez sur la touche de raccourci Ctrl+Maj+C pour copier les données de mise en page dans le presse-papiers, et le panneau de console imprimera également les données de mise en page.
| propriété | description | taper | valeur par défaut | requis |
|---|---|---|---|---|
| je | Identifiant unique, commençant par l'identifiant unique du mini-programme suivi d'un trait de soulignement, tel que « widgetKey-1234567 » | chaîne | vrai | |
| w | Nombre de copies en largeur, 12 copies au total | nombre | vrai | |
| h | Nombre de copies en hauteur, 1 copie fait environ 30 px | nombre | vrai | |
| x | Position horizontale, 12 exemplaires au total | nombre | vrai | |
| oui | Position portrait, 1 copie fait environ 30 px | nombre | vrai | |
| minW | largeur minimale | nombre | vrai | |
| maxW | largeur maximale | nombre | vrai | |
| h | hauteur minimale | nombre | vrai | |
| maxH | hauteur maximale | nombre | vrai |
export default [
{
w : 3 ,
h : 16 ,
x : 0 ,
y : 0 ,
i : 'Popular-81735522335293475546087951289435' ,
} ,
{
w : 3 ,
h : 11 ,
x : 3 ,
y : 5 ,
i : 'Todo-53084247679600442035440807237732' ,
}
] L'instance du composant peut être obtenue via la réf. Certaines méthodes et objets dom sont montés sur l'objet instance, ce qui peut facilement développer la barre d'outils et le WidgetSelector personnalisés.
| propriété | description | taper |
|---|---|---|
| dom | Objet DOM | Élément HTMLDiv |
| ajouterWidget | Ajouter une applet | (widget)=>vide |
| supprimerWidget | Supprimer l'applet | (i:widgetKey)=>vide |
| recharger | rafraîchir | ()=>vide |
| modifier | Aller à modifier | ()=>vide |
| annuler | Annuler la modification | ()=>vide |
| revenir | réinitialiser | ()=>vide |
| sauvegarder | sauvegarder | ()=>vide |
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 >
</ >
) ;
} ; ✅ panneau de configuration
☑️ écart
☑️ thème moderne
☑️ thème sombre
☑️ plus de widgets
✅ widget-cli
☑️Internationalisation
Si vous le trouvez utile, donnez-lui une étoile.
