windmill dashboard nextjs typescript ดาวน์โหลด - windmill dashboard nextjs typescript Source Source Download

windmill dashboard nextjs typescript

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

Dashboard Windmill Next.js typescript

ดูโครงการดั้งเดิมโดย @estevanmaito

ด้วยความช่วยเหลือจากผู้มีส่วนร่วมอื่น ๆ :

เวอร์ชัน typeScript โดย @neutralboy
เวอร์ชัน nextjs โดย @aldhanekaa

เห็นมันสด

นี่ไม่ใช่เทมเพลต นี่คือแอปพลิเคชั่นที่สมบูรณ์ซึ่งสร้างขึ้นบน React โดยมีรายละเอียดเล็ก ๆ น้อย ๆ ที่ได้รับการดูแลดังนั้นคุณเพียงแค่นำข้อมูลมาป้อน

การเข้าถึงเป็นสิ่งสำคัญในโครงการของฉันและฉันคิดว่ามันควรจะเป็นของคุณเช่นกันดังนั้นสิ่งนี้ได้รับการพัฒนาขึ้นเพื่อฟังผู้อ่านหน้าจอจริงกับดักโฟกัสและการนำทางแป้นพิมพ์มีให้บริการทุกที่

- คุณสมบัติ

- เข้าถึงได้อย่างง่ายดาย (พัฒนาโดยใช้เครื่องอ่านหน้าจอ)
- เปิดใช้งาน The Dark Theme (โหลดภาพที่แตกต่างกันตามธีม)
- ส่วนประกอบหลายอย่าง (กำหนดเอง)
⚡การแยกรหัส
tailwind css
กังหันลมตอบสนอง ui
ฮีโร่
chart.js

เอกสาร

ส่วนประกอบทั่วไป

Windmill Dashboard React สร้างขึ้นที่ด้านบนของ Windmill React UI คุณจะพบเอกสารสำหรับองค์ประกอบเล็ก ๆ ทุกชิ้นที่นั่น

ตัวอย่าง Boilerplate

ส่วนประกอบและภาชนะทั้งหมดจะถูกบันทึกไว้ในตัวอย่างโฟลเดอร์

การกำหนดเส้นทาง

เปลี่ยนการเปลี่ยนเส้นทางเริ่มต้นเมื่อกด / หรือ home ในไฟล์ next.config.js

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

เส้นทางแถบด้านข้าง

ในการกำหนดค่าเมนูแถบด้านข้างให้ดูไฟล์ (เส้นทาง/sidebar.tsx)

นี่คือเส้นทางที่จะแสดงในแถบด้านข้าง พวกเขาคาดหวังสามคุณสมบัติ:

path : ปลายทาง;
name : ชื่อที่จะแสดง;
icon : ไอคอนเพื่อแสดงรายการ

รายการที่ใช้เป็นแบบเลื่อนลงเช่นตัวเลือกหน้าเว็บไม่จำเป็นต้องมี path แต่คาดว่าจะมีอาร์เรย์ routes ของวัตถุที่มี path และ 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' ,
    } ,