该项目是一个免费开源的 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 - 后三个开源版本的更大集合
佐尔坦·索吉尼
罗伯特·塔尼斯拉夫