Unduh windmill dashboard react - windmill dashboard react Unduh kode sumber

windmill dashboard react

Kategori lainnya

Release 0.4.0

Unduh

Reaksi Dasbor Kincir Angin
Empat skor 100 dan PWA siap. Cukup sambungkan data Anda.

Lihat secara langsung

Ini bukan templat. Ini adalah aplikasi lengkap, dibangun di atas React, dengan semua detail kecil ditangani sehingga Anda hanya perlu membawa data untuk memasukkannya.

Aksesibilitas adalah prioritas dalam proyek saya dan menurut saya itu juga harus menjadi prioritas Anda, jadi ini dikembangkan dengan mendengarkan pembaca layar nyata, perangkap fokus, dan navigasi keyboard tersedia di mana-mana.

? Fitur

? Dapat diakses sepenuhnya (dikembangkan menggunakan pembaca layar)
? Tema gelap diaktifkan (memuat gambar berbeda berdasarkan tema)
? Beberapa komponen (khusus).
⚡ Pemisahan kode
CSS penarik
UI Reaksi Kincir Angin
Bereaksi Router
Ikon Pahlawan
Bagan.js
PWA menghadirkan pengalaman offline dan seperti aplikasi

dokumen

Komponen umum

Windmill Dashboard React dibangun di atas Windmill React UI. Anda akan menemukan dokumentasi untuk setiap komponen kecil di sana.

Rute

Rute di Dashboard Windmill dipisahkan menjadi dua kategori, sidebar (routes/sidebar.js) dan umum (routes/index.js).

Rute bilah sisi

Ini adalah rute yang akan ditampilkan di sidebar. Mereka mengharapkan tiga properti:

path : tujuan;
name : nama yang akan ditampilkan;
icon : ikon untuk mengilustrasikan item

Item yang digunakan sebagai dropdown, seperti opsi Pages, tidak memerlukan path , tetapi mengharapkan array routes objek dengan path dan 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' ,
    } ,

Rute Umum (Router).

Ini adalah rute internal (pribadi). Mereka akan dirender di dalam aplikasi, menggunakan containers/Layout default.

Jika Anda ingin menambahkan rute ke, katakanlah, laman landas, Anda harus menambahkannya ke router App (src/App.js, persis seperti Login , CreateAccount , dan laman lain yang dirutekan.

Bagaimana cara menambahkan halaman baru ke router?

Buat halaman Anda di dalam src/pages , katakanlah MyPage.js ;
Tambahkan ke router global ( src/routes/index.js )

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

Kemudian tambahkan ke array routes :

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

Jika Anda ingin membuat halaman ini dapat diakses dari sidebar, Anda harus memilih opsi:

tambahkan ke array routes root

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

tambahkan itu sebagai opsi di bawah dropdown

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

Jika Anda bertanya dari mana /app ini berasal, dari baris di dalam src/App.js inilah yang merender aplikasi:

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

Proyek ini di-bootstrap dengan Create React App.

Skrip yang Tersedia

Di direktori proyek, Anda dapat menjalankan:

`npm start`

Menjalankan aplikasi dalam mode pengembangan.
Buka http://localhost:3000 untuk melihatnya di browser.

Halaman akan dimuat ulang jika Anda melakukan pengeditan.
Anda juga akan melihat kesalahan lint apa pun di konsol.

`npm test`

Meluncurkan test runner dalam mode jam tangan interaktif.
Lihat bagian tentang menjalankan pengujian untuk informasi lebih lanjut.

`npm run build`

Membangun aplikasi untuk produksi ke folder build .
Ini menggabungkan React dengan benar dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.

Build diperkecil dan nama file menyertakan hash.
Aplikasi Anda siap untuk diterapkan!

Lihat bagian tentang penerapan untuk informasi selengkapnya.

`npm run eject`

Catatan: ini adalah operasi satu arah. Sekali Anda eject , Anda tidak dapat kembali!

Jika Anda tidak puas dengan alat build dan pilihan konfigurasi, Anda dapat eject kapan saja. Perintah ini akan menghapus ketergantungan build tunggal dari proyek Anda.

Sebaliknya, ini akan menyalin semua file konfigurasi dan dependensi transitif (webpack, Babel, ESLint, dll) langsung ke proyek Anda sehingga Anda memiliki kendali penuh atas semuanya. Semua perintah kecuali eject akan tetap berfungsi, tetapi perintah tersebut akan mengarah ke skrip yang disalin sehingga Anda dapat mengubahnya. Pada titik ini Anda sendirian.

Anda tidak perlu pernah menggunakan eject . Kumpulan fitur yang dikurasi cocok untuk penerapan kecil dan menengah, dan Anda tidak merasa berkewajiban untuk menggunakan fitur ini. Namun kami memahami bahwa alat ini tidak akan berguna jika Anda tidak dapat menyesuaikannya saat Anda siap menggunakannya.