Bảng điều khiển Quản trị Flowbite
Dự án này là một mẫu bảng điều khiển quản trị giao diện người dùng miễn phí và mã nguồn mở được xây dựng bằng các thành phần từ Flowbite và dựa trên framework Tailwind CSS hướng tiện ích với các biểu đồ, bảng, tiện ích, bố cục CRUD, cửa sổ modal, ngăn kéo và nhiều thứ khác.
Bảng điều khiển quản trị này có thể giúp bạn nhanh chóng bắt đầu xây dựng ứng dụng cho dự án của bạn bằng cách sử dụng các công nghệ phát triển giao diện người dùng mới nhất trong lĩnh vực mã nguồn mở bao gồm Tailwind CSS và Flowbite.
🌀 Xây dựng với Flowbite
Các thành phần tương tác như thanh điều hướng, cửa sổ modal, ngăn kéo và gợi ý đều dựa trên open-source component library called Flowbite phổ biến, cho phép chúng ta sử dụng những yếu tố này bằng cách tạo ra một bộ trang và tiện ích phức tạp hơn trong một mẫu bảng điều khiển quản trị đầy đủ chức năng.
💨 Lớp tiện ích Tailwind CSS
Tất cả các trang, tiện ích và thành phần đều dựa trên các lớp tiện ích từ Tailwind CSS và nó tương thích với phiên bản v3.x mới nhất của công nghệ bằng cách tự động xóa bỏ tất cả các lớp dựa trên các đường dẫn mẫu.
📊 15 trang ví dụ
Bắt đầu với 15 trang ví dụ nâng cao bao gồm hai bố cục khác nhau của trang chủ bảng điều khiển đầy đủ biểu đồ, tiện ích, bảng, bộ chọn ngày và thống kê cũng như hai trang bố cục CRUD cho sản phẩm, người dùng, một trang cài đặt, trang xác thực cho đăng nhập và đăng ký và thậm chí cả trang lỗi tùy chỉnh 404 và 500.
🧱 Các thành phần nâng cao
Bảng điều khiển quản trị này chứa nhiều thành phần nâng cao từ Flowbite và cả từ các thư viện bên thứ ba khác như ApexCharts đã được tùy chỉnh bằng các lớp Tailwind CSS và thiết kế dựa trên Flowbite Design System.
📚 Tài liệu Flowbite
Nếu bạn muốn sử dụng dự án này, chúng tôi đề xuất cũng study the component library mà chúng tôi đã sử dụng để xây dựng bảng điều khiển này, bởi vì bạn có thể sử dụng thêm các thành phần từ thư viện đó để tăng cường các ví dụ mà chúng tôi đã viết ở đây rồi.
⚙️ Luồng làm việc
Sản phẩm này được xây dựng bằng cách sử dụng các công nghệ rộng rãi sau đây:
- Tailwind CSS: tailwindcss.com
- Flowbite: flowbite.com
- HUGO gohugo.io
- Webpack webpack.js.org
Trang demo
| Bảng điều khiển | Bố cục xếp chồng | Sản phẩm (CRUD) |
|---|---|---|
 |
 |
 |
| Người dùng (CRUD) | Cài đặt | Trang giá cả |
| — | — | — |
 |
 |
 |
| Trang đăng nhập | Trang đăng ký | Trang đặt lại mật khẩu |
| — | — | — |
 |
 |
 |
| Trang quên mật khẩu | Trang khóa hồ sơ | Trang bảo trì |
| — | — | — |
 |
 |
 |
| không tìm thấy | 500 lỗi máy chủ | Sân chơi |
| — | — | — |
 |
 |
 |
Bắt đầu nhanh
. Sao chép kho lưu trữ này hoặc tải xuống tệp ZIP
. Đảm bảo bạn đã cài đặt Node.js và NPM
. Cài đặt các phụ thuộc dự án từ tệp package.json:
npm install
. Tạo một máy chủ cục bộ trên localhost:1313 bằng cách chạy lệnh sau:
npm run start
Bạn cũng có thể xây dựng dự án và lấy các tệp phân phối bên trong thư mục public/ bằng cách chạy:
npm run build
Bạn có thể tải lên dự án của bạn lên Vercel ngay lập tức bằng cách chọn cấu hình HUGO mặc định, nhưng tùy thuộc vào ngăn xếp công nghệ riêng của bạn, cho dù đó là React.js, Vue, Nuxt.js, Next.js hoặc một khung làm việc phía sau, bạn cũng có thể sao chép các bố cục từ dự án này vào ngăn xếp công nghệ riêng của bạn.
Dưới đây là danh sách các công nghệ tương thích và hướng dẫn cho Flowbite và Tailwind CSS:
Khung làm việc JavaScript
Cộng đồng mã nguồn mở tuyệt vời cũng đã xây dựng và hiện đang duy trì các thư viện độc lập sau đây cho React, Vue, Svelte và Angular:
- 🌀 Flowbite React Library
- 🍀 Flowbite Vue Library
- 🎸 Flowbite Svelte Library
- 📕 Flowbite Angular Library
Chúng tôi cũng viết các hướng dẫn tích hợp cho các khung công cụ và thư viện front-end sau đây:
- 📝 Flowbite with React guide
- 📝 Flowbite with Next.js guide
- 📝 Flowbite with Vue guide
- 📝 Flowbite with Nuxt.js guide
- 📝 Flowbite with Svelte guide
Khung công cụ Back-end
Flowbite tích hợp tốt với hầu hết các khung công cụ back-end vì nó dựa trên JavaScript thuần:
- 📚 Using Flowbite with Laravel
- 🚊 Using Flowbite with Ruby on Rails 7
- 🐸 Using Flowbite with Django
- 🌶 Using Flowbite with Flask
Cấu trúc Tệp
Trong tải xuống, bạn sẽ tìm thấy các thư mục và tệp sau đây:
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
Hỗ trợ Trình duyệt
Hiện tại, chúng tôi chính thức hướng đến hỗ trợ hai phiên bản gần đây nhất của các trình duyệt sau đây:
Tài liệu Tham khảo
- Xem trước trực tiếp: https://flowbite-admin-dashboard.vercel.app/
- Tài liệu Flowbite: https://flowbite.com/docs/getting-started/introduction/
- Tài liệu Tailwind CSS: https://tailwindcss.com/
- Thỏa thuận Giấy phép: https://flowbite.com/docs/getting-started/license/
- Vấn đề: Github Issues Page
Báo cáo Vấn đề
Chúng tôi sử dụng GitHub Issues làm trình theo dõi lỗi chính thức cho Bảng điều khiển Quản trị Flowbite. Dưới đây là một số lời khuyên cho người dùng của chúng tôi muốn báo cáo vấn đề:
. Đảm bảo bạn đang sử dụng phiên bản mới nhất của Bảng điều khiển Quản trị Flowbite. Kiểm tra CHANGELOG từ bảng điều khiển của bạn tại GitHub releases page.
. Cung cấp cho chúng tôi các bước tái tạo vấn đề sẽ rút ngắn thời gian cần để sửa chữa nó.
. Một số vấn đề có thể đặc trưng cho trình duyệt cụ thể, vì vậy việc xác định trình duyệt bạn gặp phải vấn đề có thể giúp ích.
Hỗ trợ Kỹ thuật hoặc Câu hỏi
Nếu bạn có câu hỏi hoặc cần sự trợ giúp để tích hợp sản phẩm, vui lòng contact us thay vì mở một vấn đề.
Bản quyền
- Bản quyền 2019-2023 Công ty Bergside Inc. (https://flowbite.com)
- Mã nguồn mở dưới MIT License
Liên kết Hữu ích
- 📚 Flowbite Library – Các thành phần mã nguồn mở được xây dựng với Tailwind CSS
- 🎨 Flowbite Figma – Hệ thống thiết kế được xây dựng cho Figma
- 🧱 Flowbite Blocks – Xây dựng các phần cho trang web và ứng dụng
- 💎 Flowbite Pro – Bộ sưu tập lớn hơn của phiên bản mã nguồn mở của ba liên kết trước đó
Chi tiết Tải về:
Tác giả: themesberg
Nguồn: https://github.com/themesberg/flowbite-admin-dashboard
Giấy phép: MIT license
