flowbite admin dashboard
v1.0.0
โปรเจ็กต์นี้เป็นเทมเพลตแดชบอร์ดผู้ดูแลระบบ UI แบบโอเพ่นซอร์สฟรีที่สร้างด้วยส่วนประกอบจาก Flowbite และอิงตามเฟรมเวิร์ก Tailwind CSS ที่เน้นยูทิลิตี้เป็นหลักซึ่งมีแผนภูมิ ตาราง วิดเจ็ต เค้าโครง CRUD โมดอล ลิ้นชัก และอื่นๆ
แดชบอร์ดผู้ดูแลระบบนี้สามารถช่วยให้คุณเริ่มต้นสร้างแอปพลิเคชันสำหรับโปรเจ็กต์ของคุณได้อย่างรวดเร็วโดยใช้เทคโนโลยีการพัฒนา UI/UX ใหม่ล่าสุดในพื้นที่โอเพ่นซอร์ส รวมถึง Tailwind CSS และ Flowbite
ส่วนประกอบเชิงโต้ตอบ เช่น แถบนำทาง โมดอล ลิ้นชัก และคำแนะนำเครื่องมือ ล้วนอิงตามไลบรารีคอมโพเนนต์โอเพ่นซอร์สยอดนิยมที่เรียกว่า Flowbite ซึ่งช่วยให้เราใช้องค์ประกอบเหล่านี้โดยการสร้างชุดเพจและวิดเจ็ตที่ซับซ้อนมากขึ้นภายในแดชบอร์ดผู้ดูแลระบบที่ครบครัน แม่แบบ
หน้า วิดเจ็ต และส่วนประกอบทั้งหมดอิงตามคลาสยูทิลิตี้อันดับแรกจาก Tailwind CSS เท่านั้น และเข้ากันได้กับเทคโนโลยี v3.x ล่าสุดโดยการล้างคลาสทั้งหมดโดยอัตโนมัติตามเส้นทางเทมเพลต
เริ่มต้นด้วยหน้าตัวอย่างขั้นสูง 15 หน้า รวมถึงสองเค้าโครงที่แตกต่างกันของหน้าแรกของแดชบอร์ดที่เต็มไปด้วยวิดเจ็ตแผนภูมิ ตาราง เครื่องมือเลือกวันที่ และสถิติ และยังมีหน้าเค้าโครง CRUD สองหน้าสำหรับผลิตภัณฑ์ ผู้ใช้ หน้าการตั้งค่า หน้าการตรวจสอบสิทธิ์สำหรับการเข้าสู่ระบบและการลงทะเบียน และแม้แต่ หน้าข้อผิดพลาด 404 และ 500 ที่กำหนดเอง
แดชบอร์ดผู้ดูแลระบบนี้มีส่วนประกอบขั้นสูงมากมายทั้งจาก Flowbite แต่ยังมาจากไลบรารีบุคคลที่สามอื่นๆ เช่น ApexCharts ซึ่งได้รับการปรับแต่งเป็นพิเศษด้วยคลาส Tailwind CSS และออกแบบโดยใช้ Flowbite Design System
หากคุณต้องการใช้โปรเจ็กต์นี้ เราขอแนะนำให้ศึกษาไลบรารีส่วนประกอบที่เราใช้ในการสร้างแดชบอร์ดนี้ด้วย เนื่องจากคุณสามารถใช้ส่วนประกอบเพิ่มเติมจากไลบรารีนั้นเพื่อปรับปรุงตัวอย่างที่เราเขียนโค้ดไว้ที่นี่แล้ว
ผลิตภัณฑ์นี้สร้างขึ้นโดยใช้เทคโนโลยีที่ใช้กันอย่างแพร่หลายดังต่อไปนี้:
CSS ท้ายลม: tailwindcss.com
Flowbite: flowbite.com
ฮิวโก้ gohugo.io
เว็บแพ็ค webpack.js.org
แดชบอร์ดผู้ดูแลระบบ Flowbite
กรอบงานจาวาสคริปต์
กรอบการทำงานส่วนหลัง
สร้างด้วย Flowbite
คลาสยูทิลิตี้ CSS ของ Tailwind
ตัวอย่างหน้า 15 หน้า
ส่วนประกอบขั้นสูง
เอกสาร Flowbite
ขั้นตอนการทำงาน
สารบัญ
หน้าสาธิต
เริ่มต้นอย่างรวดเร็ว
โครงสร้างไฟล์
รองรับเบราว์เซอร์
ทรัพยากร
การรายงานปัญหา
การสนับสนุนทางเทคนิคหรือคำถาม
การออกใบอนุญาต
ลิงค์ที่เป็นประโยชน์
ผู้เขียน
โคลนที่เก็บนี้หรือดาวน์โหลดไฟล์ ZIP
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ NPM แล้ว
ติดตั้งการพึ่งพาโครงการจากไฟล์ package.json :
npm install
สร้างเซิร์ฟเวอร์ท้องถิ่นบน localhost:1313 โดยการรันคำสั่งต่อไปนี้:
npm run start
คุณยังสามารถสร้างโปรเจ็กต์และรับไฟล์การแจกจ่ายภายในโฟลเดอร์ public/ ได้โดยการรัน:
npm run build
คุณสามารถอัปโหลดโปรเจ็กต์ของคุณไปยัง Vercel ได้ทันทีโดยเลือกการกำหนดค่า HUGO เริ่มต้น แต่ขึ้นอยู่กับสแต็คเทคโนโลยีของคุณเอง ไม่ว่าจะเป็น React.js, Vue, Nuxt.js, Next.js หรือเฟรมเวิร์กแบ็คเอนด์ คุณยังสามารถคัดลอกเลย์เอาต์ได้อีกด้วย จากโปรเจ็กต์นี้ภายในกลุ่มเทคโนโลยีของคุณเอง
รายชื่อเทคโนโลยีและคำแนะนำที่เข้ากันได้สำหรับ Flowbite และ Tailwind CSS มีดังนี้
ชุมชนโอเพ่นซอร์สที่ยอดเยี่ยมยังสร้างและดูแลรักษาไลบรารีแบบสแตนด์อโลนต่อไปนี้สำหรับ React, Vue, Svelte และ Angular:
ไลบรารีปฏิกิริยา Flowbite
ห้องสมุด Flowbite Vue
ห้องสมุด Flowbite Svelte
ไลบรารีเชิงมุม Flowbite
นอกจากนี้เรายังเขียนคำแนะนำในการบูรณาการสำหรับเฟรมเวิร์กและไลบรารีส่วนหน้าต่อไปนี้:
Flowbite พร้อมคำแนะนำ React
Flowbite พร้อมคำแนะนำ Next.js
Flowbite พร้อมไกด์ Vue
Flowbite พร้อมคำแนะนำ Nuxt.js
Flowbite พร้อมคำแนะนำ Svelte
Flowbite มีการผสานรวมที่ยอดเยี่ยมกับเฟรมเวิร์กแบ็คเอนด์ส่วนใหญ่เนื่องจากต้องใช้ vanilla JavaScript:
การใช้ Flowbite กับ Laravel
การใช้ Flowbite กับ Ruby บน Rails 7
การใช้งาน Flowbite กับ Django
การใช้ Flowbite กับ Flask
ภายในการดาวน์โหลดคุณจะพบไดเร็กทอรีและไฟล์ต่อไปนี้:
Flowbite Admin Dashboard . ├── LICENSE ├── README.md ├── config.yml ├── content ├── data ├── layouts ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── resources ├── src ├── static ├── tailwind.config.js ├── webpack.config.js └── yarn.lock
ในปัจจุบัน เรามีเป้าหมายอย่างเป็นทางการที่จะสนับสนุนเบราว์เซอร์สองเวอร์ชันล่าสุดต่อไปนี้:
ดูตัวอย่างสด: https://flowbite-admin-dashboard.vercel.app/
เอกสาร Flowbite: https://flowbite.com/docs/getting-started/introduction/
เอกสารประกอบ Tailwind CSS: https://tailwindcss.com/
ข้อตกลงใบอนุญาต: https://flowbite.com/docs/getting-started/license/
ปัญหา: หน้าปัญหา Github
เราใช้ GitHub Issues เป็นตัวติดตามข้อบกพร่องอย่างเป็นทางการสำหรับ Flowbite Admin Dashboard คำแนะนำสำหรับผู้ใช้ของเราที่ต้องการรายงานปัญหามีดังนี้
ตรวจสอบให้แน่ใจว่าคุณใช้ Flowbite Admin Dashboard เวอร์ชันล่าสุด ตรวจสอบ CHANGELOG จากแดชบอร์ดของคุณในหน้าเผยแพร่ GitHub
การแจ้งขั้นตอนที่ทำซ้ำได้สำหรับปัญหาดังกล่าวจะช่วยลดระยะเวลาในการแก้ไขได้
ปัญหาบางอย่างอาจเกิดขึ้นเฉพาะกับเบราว์เซอร์ ดังนั้นการระบุเบราว์เซอร์ที่คุณพบปัญหาอาจช่วยได้
หากคุณมีคำถามหรือต้องการความช่วยเหลือในการบูรณาการผลิตภัณฑ์ โปรดติดต่อเราแทนการเปิดปัญหา
ลิขสิทธิ์ 2019-2023 Bergside Inc. (https://flowbite.com)
โอเพ่นซอร์สภายใต้ใบอนุญาต MIT
Flowbite Library - ส่วนประกอบโอเพ่นซอร์สที่สร้างด้วย Tailwind CSS
Flowbite Figma - ระบบการออกแบบที่สร้างขึ้นสำหรับ Figma
Flowbite Blocks - การสร้างส่วนต่างๆ สำหรับเว็บไซต์และแอปพลิเคชัน
Flowbite Pro - คอลเลกชั่นโอเพ่นซอร์สขนาดใหญ่กว่าของสามรุ่นหลัง
โซลตัน ซือเยนยี
โรเบิร์ต ทานิสลาฟ
