返回主题列表

Flowbite

由 Flowbite 核心团队构建的免费开源管理仪表盘模板,基于 Flowbite 设计系统,提供图表、小部件、表格、CRUD 布局等 UI 组件。


价格

免费


Flowbite Astro 管理仪表盘

本项目是一个免费开源的 UI 管理仪表盘模板,它使用 Flowbite 组件构建,并基于实用至上的 Tailwind CSS 框架,其中包含图表、表格、小部件、CRUD 布局、模态框、抽屉等。

这个管理仪表盘可以快速帮助您使用最新的 UI/UX 开发技术,包括 Tailwind CSS 和 Flowbite,为您的项目构建应用程序。

使用 Flowbite 构建

交互式组件,如导航栏、模态框、抽屉和工具提示,都基于流行的开源组件库 Flowbite,这使我们能够通过在功能齐全的管理仪表盘模板中创建更复杂的页面和小部件来使用这些元素。

Tailwind CSS 类

所有页面、小部件和组件都完全基于 Tailwind CSS 的实用至上类,并且与最新 v3.x 版本兼容,它会根据模板路径自动清除所有类。

15 个示例页面

开始使用 15 个高级示例页面,包括两种不同布局的仪表盘主页(包含图表小部件、表格、日期选择器和统计数据),以及用于产品、用户的两个 CRUD 布局页面、一个设置页面、登录和注册的身份验证页面,甚至自定义的 404 和 500 错误页面。

高级 UI 组件

此管理仪表盘包含许多高级组件,它们既来自 Flowbite 也来自其他第三方库,例如 ApexCharts,这些组件已使用 Tailwind CSS 类进行定制,并基于 Flowbite 设计系统进行设计。

Flowbite 文档

如果您想使用本项目,我们建议您同时学习我们用于构建此仪表盘的组件库,因为您可以从该库中使用更多组件来增强我们在此处已编码的示例。

开发工作流程

此模板使用 AstroFlowbiteTailwind CSS 构建。

  1. 克隆此仓库或下载 ZIP 文件
  2. 请确保已安装 Node.js 和 NPM、PNPM 或 Yarn
  3. 从 package.json 文件安装项目依赖项
pnpm install

PNPM 是此处用于演示的首选包管理器,但您可以使用任何您喜欢的。

运行以下命令,在 localhost:2121 启动 Astro 本地开发服务器

pnpm run dev

您还可以通过运行以下命令来构建项目,并将分发文件获取到 dist/ 文件夹中

pnpm run build

然后,您可以使用本地 Web 服务器预览生成的构建

pnpm run preview

关于部署,请参阅 GitHub 工作流,您可以在其中配置目标(已预配置为 GitHub Pages)。更多详细信息请参阅 Astro 的部署文档

网站配置为静态部署,但您可以通过取消注释 ./astro.config.mjs 中的 output: "server" 来将其切换到服务器端渲染。

有关如何开始使用以及使用了哪些工具的更多信息,请查看 GitHub 上的官方仓库。