download windmill dashboard react - windmill dashboard react Download do código-fonte

windmill dashboard react

Outras categorias

Release 0.4.0

Baixar

Reação do painel do moinho de vento
Quatro pontuações de 100 e PWA prontos. Basta conectar seus dados.

Veja ao vivo

Este não é um modelo. Este é um aplicativo completo, construído em cima do React, com todos os pequenos detalhes cuidados, então você só precisa trazer os dados para alimentá-lo.

A acessibilidade é uma prioridade nos meus projetos e acho que deveria ser nos seus também, então isso foi desenvolvido ouvindo leitores de tela reais, armadilhas de foco e navegação por teclado estão disponíveis em todos os lugares.

? Características

? Totalmente acessível (desenvolvido usando leitores de tela)
? Tema escuro ativado (carregue até imagens diferentes com base no tema)
? Vários componentes (personalizados)
⚡ Divisão de código
CSS do vento favorável
UI do Moinho de Vento React
Roteador React
Heroícones
Gráfico.js
PWA oferece experiência offline e semelhante a um aplicativo

Documentos

Componentes gerais

Windmill Dashboard React é construído sobre a UI do Windmill React. Você encontrará a documentação para cada pequeno componente lá.

Roteamento

As rotas no Windmill Dashboard são separadas em duas categorias, barra lateral (routes/sidebar.js) e geral (routes/index.js).

Rotas da barra lateral

Estas são as rotas que aparecerão na barra lateral. Eles esperam três propriedades:

path : o destino;
name : o nome a ser mostrado;
icon : um ícone para ilustrar o item

Os itens usados como menus suspensos, como a opção Páginas, não precisam de path , mas esperam uma matriz de objetos routes com path e 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' ,
    } ,

Rotas gerais (roteador)

Estas são rotas internas (privadas). Eles serão renderizados dentro do aplicativo, usando o padrão containers/Layout .

Se você quiser adicionar uma rota para, digamos, uma landing page, você deve adicioná-la ao roteador do App (src/App.js, exatamente como Login , CreateAccount e outras páginas são roteadas.

Como adicionar uma nova página ao roteador?

Crie sua página dentro de src/pages , digamos MyPage.js ;
Adicione-o ao roteador global ( src/routes/index.js )

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

Em seguida, adicione-o ao array routes :

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

Se quiser tornar esta página acessível na barra lateral, você terá as seguintes opções:

adicione-o ao array routes raiz

 {
  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
} ,

adicione-o como uma opção em um menu suspenso

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

Se você está perguntando de onde vem esse /app , é desta linha dentro de src/App.js , que renderiza o aplicativo:

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

Este projeto foi inicializado com Create React App.

Scripts Disponíveis

No diretório do projeto, você pode executar:

`npm start`

Executa o aplicativo no modo de desenvolvimento.
Abra http://localhost:3000 para visualizá-lo no navegador.

A página será recarregada se você fizer edições.
Você também verá erros de lint no console.

`npm test`

Inicia o executor de teste no modo de observação interativo.
Consulte a seção sobre execução de testes para obter mais informações.

`npm run build`

Cria o aplicativo para produção na pasta build .
Ele agrupa corretamente o React no modo de produção e otimiza a construção para obter o melhor desempenho.

A compilação é reduzida e os nomes dos arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!

Consulte a seção sobre implantação para obter mais informações.

`npm run eject`

Nota: esta é uma operação unilateral. Depois de eject , você não pode voltar!

Se não estiver satisfeito com a ferramenta de compilação e as opções de configuração, você poderá eject a qualquer momento. Este comando removerá a dependência de compilação única do seu projeto.

Em vez disso, ele copiará todos os arquivos de configuração e as dependências transitivas (webpack, Babel, ESLint, etc) diretamente no seu projeto para que você tenha controle total sobre eles. Todos os comandos, exceto eject , ainda funcionarão, mas apontarão para os scripts copiados para que você possa ajustá-los. Neste ponto você está sozinho.

Você nunca precisa usar eject . O conjunto de recursos selecionados é adequado para implantações pequenas e médias e você não deve se sentir obrigado a usar esse recurso. No entanto, entendemos que esta ferramenta não seria útil se você não pudesse personalizá-la quando estiver pronto para isso.