windmill dashboard nextjs typescript Unduh - windmill dashboard nextjs typescript Sumber Kode Download

windmill dashboard nextjs typescript

Kode Sumber AI

1.0.0

Unduh

Windmill dashboard next.js naskah

Lihat proyek asli oleh @estevanmaito

Dengan bantuan dari kontributor lain:

Versi naskah oleh @neutralboy
Versi NextJs oleh @aldhanekaa

Melihatnya hidup

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

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

? Fitur

? Melalui yang dapat diakses (dikembangkan menggunakan pembaca layar)
? Tema Gelap Diaktifkan (Muat gambar yang berbeda berdasarkan tema)
? Beberapa komponen (khusus)
⚡ Kode pemisahan
Tailwind CSS
Windmill bereaksi UI
Heroicons
Chart.js

Dokumen

Komponen Umum

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

Contoh boilerplate

Semua komponen dan wadah disimpan dalam contoh folder

Rute

Ubah Default Redirecting Saat Tekan / atau home di File Next.config.js

  async redirects ( ) {
    return [
      {
        source : '/' ,
        destination : '/example/login' ,
        permanent : false ,
      } ,
    ]
  }

Rute sidebar

Untuk mengonfigurasi menu sidebar, lihat file (rute/sidebar.tsx).

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

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

Item yang digunakan sebagai dropdown, seperti opsi halaman, tidak membutuhkan path , tetapi harapkan array routes objek dengan path dan name :

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