該專案是一個免費開源的 UI 管理儀表板模板,使用 Flowbite 的元件構建,並基於實用程式優先的 Tailwind CSS 框架,具有圖表、表格、小部件、CRUD 佈局、模式、抽屜等。
此管理儀表板可以快速幫助您開始使用開源領域最新的 UI/UX 開發技術(包括 Tailwind CSS 和 Flowbite)為您的專案建立應用程式。
導航列、模式、抽屜和工具提示等互動式元件均基於名為 Flowbite 的流行開源元件庫,該庫使我們能夠透過在成熟的管理儀表板中建立更複雜的頁面和小部件集來使用這些元素模板。
所有頁面、小部件和元件都完全基於 Tailwind CSS 中的實用程式優先類,並且透過根據模板路徑自動清除所有類,與該技術的最新v3.x
相容。
開始使用15 個高級範例頁面,包括儀表板主頁的兩種不同佈局,其中充滿了圖表小部件、表格、日期選擇器和統計信息,還有兩個用於產品、用戶的CRUD 佈局頁面、一個設置頁面、用於登入和註冊的身份驗證頁面,甚至自訂 404 和 500 錯誤頁面。
此管理儀表板包含來自 Flowbite 和其他第三方程式庫(例如 ApexCharts)的許多高階元件,這些元件是使用 Tailwind CSS 類別自訂的,並基於 Flowbite 設計系統進行設計。
如果您想使用此項目,我們建議您也研究我們用於建立此儀表板的元件庫,因為您可以使用該庫中的更多元件來增強我們已在此處編碼的範例。
本產品採用以下廣泛使用的技術建構:
Tailwind CSS:tailwindcss.com
Flowbite:flowbite.com
HUGO gohugo.io
Webpack webpack.js.org
Flowbite 管理儀表板
JavaScript 框架
後端框架
使用 Flowbite 構建
Tailwind CSS 實用工具類
15 個範例頁面
先進組件
Flowbite 文檔
工作流程
目錄
演示頁面
快速啟動
文件結構
瀏覽器支援
資源
報告問題
技術支援或問題
授權
有用的連結
作者
克隆此儲存庫或下載 ZIP 文件
確保已安裝 Node.js 和 NPM
從package.json
檔案安裝專案依賴項:
npm install
透過執行以下命令在localhost:1313
上建立本機伺服器:
npm run start
您也可以透過執行以下命令來建置專案並取得public/
資料夾中的分發檔案:
npm run build
您可以透過選擇預設的 HUGO 配置立即將專案上傳到 Vercel,但根據您自己的技術堆疊,無論是 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 與大多數後端框架都有很好的集成,因為它依賴於普通 JavaScript:
將 Flowbite 與 Laravel 結合使用
將 Flowbite 與 Ruby on 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 管理儀表板的官方錯誤追蹤器。以下是針對想要回報問題的用戶的一些建議:
確保您使用的是最新版本的 Flowbite 管理儀表板。從 GitHub 發布頁面上的儀表板檢查變更日誌。
為我們提供針對該問題的可重現步驟將縮短修復問題所需的時間。
有些問題可能是特定於瀏覽器的,因此指定您在哪個瀏覽器中遇到該問題可能會有所幫助。
如果您有疑問或需要整合產品的協助,請聯絡我們而不是提出問題。
版權所有 2019-2023 Bergside Inc. (https://flowbite.com)
根據 MIT 許可證開源
Flowbite Library - 使用 Tailwind CSS 建構的開源元件
Flowbite Figma - 為 Figma 建造的設計系統
Flowbite Blocks - 建立網站和應用程式的部分
Flowbite Pro - 後三個開源版本的更大集合
佐爾坦·索吉尼
羅伯特·塔尼斯拉夫