react dashboard pro

Reaccionar Panel Pro

Solución de panel integral lista para usar

Funcionalidad de panel dinámico en tan solo unos sencillos pasos

Resuelve las necesidades de personalización del Dashboard + Widget, que casi son utilizados por la cara B de "Miles de personas, miles de caras".

Una solución de panel integral que funciona desde el primer momento

Tenga una funcionalidad de panel dinámico en tan solo unos sencillos pasos

Resuelve las necesidades de personalización del Panel + Widget de "miles de personas".

Repositorio

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

Documentos

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

Manifestación

Instalar

npm i react-dashboard-pro -S

Descargar widget

npm i widgets-cli -D
npx widgets-cli

Tienda de widgets

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

Uso

 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 }
    />
  ) ;
} ; 

Accesorios

propiedad	descripción	tipo	valor predeterminado	requerido
widgets	Colección opcional de objetos de subprograma.	{ [clave: cadena]: widget}		verdadero
modo de edición	Ya sea para editar el estado	booleano	FALSO	FALSO
diseño predeterminado	diseño predeterminado	diseñoArtículo[]	[]	FALSO
widgetWrapClassName	nombre de clase del contenedor del widget	cadena		FALSO
widgetWrapStyle	estilo de contenedor de widgets	React.CSSPropiedades		FALSO
disposición	datos de diseño	diseñoArtículo[]	nulo	FALSO
altura mínima	altura mínima	número	300	FALSO
longitud máxima del widget	La cantidad máxima de widgets que se pueden agregar al panel actual	número	20	FALSO
barra de herramientas	Si mostrar la barra de herramientas predeterminada	{tipo: 'izquierda' | 'derecha' | 'arriba' | 'abajo';	verdadero	FALSO
clave de almacenamiento	Identificador único almacenado localmente	booleano	'por defecto'	FALSO
onLayoutChange	Devolución de llamada de cambio de diseño	(diseño: LayoutsIF) => nulo		FALSO
enReset	Borrar devolución de llamada del botón	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => nulo		FALSO
enRemoveWidget	Eliminar la devolución de llamada del subprograma	(widget: WidgetIF, dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutsIF) => nulo		FALSO
enAddWidget	Agregar una devolución de llamada al mini programa	(widget: WidgetIF, dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutsIF) => nulo		FALSO
enRecargar	Devolución de llamada del botón Actualizar	(diseño actual: diseñosIF) => nulo		FALSO
en Cancelar	Cancelar edición de devolución de llamada	(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => nulo		FALSO
enEditar	Ingrese la devolución de llamada de edición	(diseño actual: diseñosIF) => nulo		FALSO
al guardar	Guardar devolución de llamada del botón	(diseño actual: diseñosIF) => nulo		FALSO
enRevertir	Restaurar devolución de llamada del botón	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => nulo		FALSO

widget

Un widget puede ser cualquier contenido abierto y se puede expandir libremente. El archivo de entrada necesita exportar un objeto para describir el widget. Para obtener más widgets, puede verlo aquí.

Los widgets predeterminados básicamente dependen de antd y menos. Preste atención a la instalación de dependencias.

propiedad	descripción	tipo	valor predeterminado	requerido
nombre	Nombre del miniprograma	cadena		verdadero
descripción	Descripción del mini programa	cadena		verdadero
etiquetas	Etiquetas, utilizadas como base de clasificación para mini selectores de programas.	cadena[]		verdadero
componente	Componente del mini programa	Componente | FunciónComponente		verdadero
componente de configuración	Componentes de configuración correspondientes al mini programa	Componente | FunciónComponente | nulo		verdadero
longitud máxima	El número máximo de veces que se puede agregar este subprograma al panel actual	número		verdadero
instantánea	Imagen instantánea del miniprograma, utilizada para la visualización del selector de miniprogramas	ImagenBitmapSource		verdadero
icono	Icono de mini programa, utilizado para la pantalla del selector de mini programa	ReaccionarElemento		verdadero
iconoFondo	Fondo del icono de mini programa, utilizado para la visualización del selector de mini programa	cadena		verdadero
tamaño	Información sobre el tamaño del miniprograma	{ancho predeterminado: número;alto predeterminado: número;ancho máximo: número;alto máximo: número;ancho mínimo: número;alto mínimo: número}		verdadero

 // 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 } ;

Disposición

Generalmente, no es necesario prestar mucha atención a la información de diseño, solo es necesario serializarla y almacenarla en forma de cadena si desea obtener los datos de diseño del tablero en tiempo real (por ejemplo, cuando desea configurar el diseño predeterminado). ), puede centrarse (clic del mouse) en el correspondiente En el tablero, presione la tecla de acceso directo Ctrl+Shift+C para copiar los datos de diseño al portapapeles, y el panel de la consola también imprimirá los datos de diseño.

propiedad	descripción	tipo	valor predeterminado	requerido
i	Identificador único, que comienza con el identificador único del miniprograma seguido de un guión bajo, como "widgetKey-1234567".	cadena		verdadero
w	Número de copias en ancho, 12 copias en total	número		verdadero
h	Número de copias de altura, 1 copia mide aproximadamente 30 px	número		verdadero
incógnita	Posición horizontal, 12 copias en total.	número		verdadero
y	Posición vertical, 1 copia mide aproximadamente 30 píxeles	número		verdadero
minW	ancho mínimo	número		verdadero
máxW	ancho máximo	número		verdadero
h	altura mínima	número		verdadero
máxH	altura máxima	número		verdadero

 export default [
  {
    w : 3 ,
    h : 16 ,
    x : 0 ,
    y : 0 ,
    i : 'Popular-81735522335293475546087951289435' ,
  } ,
  {
    w : 3 ,
    h : 11 ,
    x : 3 ,
    y : 5 ,
    i : 'Todo-53084247679600442035440807237732' ,
  }
] 

Método

La instancia del componente se puede obtener a través de ref. Algunos métodos y objetos dom están montados en el objeto de instancia, lo que puede expandir fácilmente la barra de herramientas personalizada y el WidgetSelector.

propiedad	descripción	tipo
dominación	objeto DOM	HTMLDivElemento
agregarWidget	Agregar subprograma	(widget) => nulo
eliminarWidget	Eliminar subprograma	(i:widgetKey)=>nulo
recargar	refrescar	()=>nulo
editar	Ir a editar	()=>nulo
cancelar	Cancelar edición	()=>nulo
revertir	reiniciar	()=>nulo
ahorrar	ahorrar	()=>nulo

 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 >
    </ >
  ) ;
} ; 

Hacer

✅Panel de configuración

☑️ brecha

☑️ tema moderno

☑️ tema oscuro

☑️ más widgets

✅ widget-cli

☑️Internacionalización

El fin

• Todos son bienvenidos a plantear problemas. Haré todo lo posible para resolver sus puntos débiles si tiene alguna necesidad.
• Continuaré manteniendo este proyecto para que todos puedan usarlo con confianza.

Si lo encuentras útil, por favor dale una estrella.