Descarga windmill dashboard react - Descarga del código fuente windmill dashboard react

windmill dashboard react

Otras categorias

Release 0.4.0

Descargar

Panel de control de molino de viento Reaccionar
Cuatro 100 puntajes y PWA listo. Simplemente conecta tus datos.

verlo en vivo

Esto no es una plantilla. Esta es una aplicación completa, construida sobre React, con todos los pequeños detalles cuidados, por lo que solo necesitas traer los datos para alimentarla.

La accesibilidad es una prioridad en mis proyectos y creo que debería serlo también en el tuyo, por lo que esto se desarrolló escuchando lectores de pantalla reales, trampas de enfoque y navegación con teclado disponibles en todas partes.

? Características

? Totalmente accesible (desarrollado utilizando lectores de pantalla)
? Tema oscuro habilitado (carga incluso imágenes diferentes según el tema)
? Múltiples componentes (personalizados)
⚡ División de código
CSS de viento de cola
UI de reacción del molino de viento
Reaccionar enrutador
Heroiconos
Gráfico.js
PWA ofrece una experiencia sin conexión y similar a una aplicación

Documentos

Componentes generales

Windmill Dashboard React está construido sobre la interfaz de usuario de Windmill React. Allí encontrará la documentación para cada componente pequeño.

Enrutamiento

Las rutas en Windmill Dashboard se dividen en dos categorías, barra lateral (routes/sidebar.js) y general (routes/index.js).

Rutas de la barra lateral

Estas son las rutas que se mostrarán en la barra lateral. Esperan tres propiedades:

path : el destino;
name : el nombre que se mostrará;
icon : un icono para ilustrar el elemento

Los elementos que se utilizan como menús desplegables, como la opción Páginas, no necesitan una path , pero esperan una matriz de routes de objetos con path y name :

 // sidebar.js
{
  path : '/app/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/create-account' ,
      name : 'Create account' ,
    } ,

Rutas generales (enrutador)

Estas son rutas internas (privadas). Se representarán dentro de la aplicación, utilizando los containers/Layout predeterminados.

Si desea agregar una ruta a, digamos, una página de destino, debe agregarla al enrutador de la App (src/App.js, exactamente como se enrutan Login , CreateAccount y otras páginas.

¿Cómo agregar una nueva página al enrutador?

Cree su página dentro de src/pages , diga MyPage.js ;
Agréguelo al enrutador global ( src/routes/index.js )

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

Luego agréguelo a la matriz routes :

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

Si desea que esta página sea accesible desde la barra lateral, tiene estas opciones:

agréguelo a la matriz routes raíz

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

agréguelo como una opción en un menú desplegable

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

Si preguntas de dónde viene esta /app , es desde esta línea dentro de src/App.js que representa la aplicación:

 < Route path = "/app" component = { Layout } />

Este proyecto se inició con la aplicación Create React.

Guiones disponibles

En el directorio del proyecto, puede ejecutar:

`npm start`

Ejecuta la aplicación en modo de desarrollo.
Abra http://localhost:3000 para verlo en el navegador.

La página se recargará si realiza modificaciones.
También verá cualquier error de pelusa en la consola.

`npm test`

Inicia el corredor de prueba en el modo de reloj interactivo.
Consulte la sección sobre ejecución de pruebas para obtener más información.

`npm run build`

Crea la aplicación para producción en la carpeta build .
Incluye correctamente React en modo de producción y optimiza la compilación para obtener el mejor rendimiento.

La compilación se minimiza y los nombres de archivos incluyen los hashes.
¡Su aplicación está lista para ser implementada!

Consulte la sección sobre implementación para obtener más información.

`npm run eject`

Nota: esta es una operación unidireccional. Una vez que eject , ¡no podrás regresar!

Si no está satisfecho con la herramienta de compilación y las opciones de configuración, puede eject en cualquier momento. Este comando eliminará la dependencia de compilación única de su proyecto.

En su lugar, copiará todos los archivos de configuración y las dependencias transitivas (webpack, Babel, ESLint, etc.) directamente en su proyecto para que tenga control total sobre ellos. Todos los comandos, excepto eject seguirán funcionando, pero apuntarán a los scripts copiados para que puedas modificarlos. En este punto estás solo.

No es necesario que uses nunca eject . El conjunto de funciones seleccionado es adecuado para implementaciones pequeñas y medianas, y no debería sentirse obligado a utilizar esta función. Sin embargo, entendemos que esta herramienta no sería útil si no pudiera personalizarla cuando esté listo para usarla.