该项目是一个免费的开源 UI 管理仪表板模板,使用 Flowbite 的组件构建,并基于实用程序优先的 Tailwind CSS 框架,具有图表、表格、小部件、CRUD 布局、模式、抽屉等。
此管理仪表板可以快速帮助您开始使用开源领域最新的 UI/UX 开发技术(包括 Tailwind CSS 和 Flowbite)为您的项目构建应用程序。
仪表板 | 堆叠布局 | 产品(增删改查) |
---|---|---|
用户(增删改查) | 设置 | 定价页面 |
---|---|---|
登录页面 | 注册页面 | 重置密码 |
---|---|---|
忘记密码 | 型材锁 | 维护页面 |
---|---|---|
404 未找到 | 500服务器错误 | 操场 |
---|---|---|
导航栏、模式、抽屉和工具提示等交互式组件均基于名为 Flowbite 的流行开源组件库,该库使我们能够通过在成熟的管理仪表板中创建更复杂的页面和小部件集来使用这些元素模板。
所有页面、小部件和组件都完全基于 Tailwind CSS 中的实用程序优先类,并且通过根据模板路径自动清除所有类,与该技术的最新v3.x
兼容。
开始使用 15 个高级示例页面,包括仪表板主页的两种不同布局,其中充满了图表小部件、表格、日期选择器和统计信息,还有两个用于产品、用户的 CRUD 布局页面、一个设置页面、用于登录和注册的身份验证页面,甚至自定义 404 和 500 错误页面。
该管理仪表板包含许多来自 Flowbite 和其他第三方库的高级组件,例如 ApexCharts,这些组件是使用 Tailwind CSS 类定制的,并基于 Flowbite 设计系统进行设计。
如果您想使用此项目,我们建议您还研究我们用于构建此仪表板的组件库,因为您可以使用该库中的更多组件来增强我们已在此处编码的示例。
该产品采用以下广泛使用的技术构建:
package.json
文件安装项目依赖项: pnpm install
# or
npm install
# or
yarn
PNPM 是用于演示的首选包管理器,但您可以使用您想要的。
localhost:2121
pnpm run dev
您还可以通过运行以下命令来构建项目并获取dist/
文件夹内的分发文件:
pnpm run build
然后,您可以使用本地 Web 服务器预览生成的构建:
pnpm run preview
对于部署,请参阅 GitHub 工作流程,您可以在其中插入目标(为 GitHub 页面预先配置)。请参阅 docs.astro.build/en/guides/deploy
网站配置为静态部署,但您只需取消注释输出即可将其翻转为服务器端渲染output: "server"
./astro.config.mjs
中的“server”。
克隆此存储库后,您将发现以下(简化的)结构:
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
我们致力于快速入门和开发人员体验。
该项目广泛支持 TypeScript、Astro、Tailwind 和 VS Code。
它配置了合理的默认值、一些意见以及一些使其能够很好地协同工作的技巧。
astro-eslint-parser
+ eslint-plugin-astro
prettier-plugin-astro
(与astro
捆绑在一起)请随意修改这些设置以满足您自己的需求。
目前,我们官方的目标是支持以下浏览器的最后两个版本:
实时预览:https://themesberg.github.io/flowbite-astro-admin-dashboard/
Flowbite 文档:https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS 文档:https://tailwindcss.com/
许可协议:https://flowbite.com/docs/getting-started/license/
问题:Github 问题页面
以下是 Flowbite 和 Tailwind CSS 的兼容技术和指南列表:
这个出色的开源社区还构建并当前维护着以下 React、Vue、Svelte 和 Angular 的独立库:
我们还为以下前端框架和库编写了集成指南:
Flowbite 与大多数后端框架都有很好的集成,因为它依赖于普通 JavaScript:
我们使用 GitHub Issues 作为 Flowbite 管理仪表板的官方错误跟踪器。以下是针对想要报告问题的用户的一些建议:
如果您有疑问或需要集成产品的帮助,请联系我们而不是提出问题。