flowbite

Flowbite 是一个基于 Tailwind CSS 构建的开源 UI 组件库和前端框架。其目标是通过提供一套使用 Tailwind 实用类（utility classes）的现成 Web 组件来加速网站开发，使开发者能够利用现有模式组装界面，而无需从零开始编写每个元素。 **安装与使用** 该库可以通过 npm (`npm install flowbite`) 作为插件添加到现有的 Tailwind CSS 项目中。文档说明的设置流程包括将 Flowbite 主题变量导入主 CSS 文件、注册插件、配置 node_modules 内部的源文件，并加载驱动交互元素的捆绑 JavaScript。README 中引用了多种内置主题，包括 default、minimal、enterprise、playful 和 mono 变体，每种主题都配有特定的 Web 字体。此外，还提供了一个 CDN 路径，用于快速将压缩后的 CSS 和 JS 添加到页面中。 **交互模型** 交互组件主要由数据属性接口驱动：例如 `data-modal-target` 和 `data-modal-toggle` 等属性可以在无需自定义脚本的情况下将触发元素与组件连接，大多数文档示例均采用此策略。为了获得更多控制权，`initFlowbite()` 函数（或如 `initDropdowns` 和 `initModals` 等按类别划分的辅助函数）允许 Vue 和 Nuxt 等框架自行注册事件监听器。 **编程与类型化 API** 该软件包将组件作为支持 ESM 和 CJS 的 JavaScript 类公开。例如，可以通过包含位置、背景行为以及 `onShow`、`onHide` 和 `onToggle` 等回调函数的选项来实例化一个模态框。项目提供了 TypeScript 类型声明，包括 `ModalOptions` 和 `ModalInterface` 等接口，以便对选项对象和实例进行类型定义。 **组件目录** README 列出了广泛的组件，其中包括：警报（alerts）、徽章（badges）、面包屑（breadcrumbs）、按钮及按钮组（buttons and button groups）、卡片（cards）、下拉菜单（dropdowns）、表单（forms）、列表组（list groups）、排版（typography）、模态框（modals）、标签页（tabs）、导航栏（navbars）、分页（pagination）、时间线（timelines）、进度条（progress bars）、表格（tables）、吐司提示（toasts）、工具提示（tooltips）、日期选择器（datepickers）、加载动画（spinners）、页脚（footers）、折叠面板（accordions）、侧边栏（sidebars）、轮播图（carousels）、头像（avatars）、评分（ratings）以及各种表单输入（输入框、文件输入、搜索输入、选择框、文本域、复选框、单选框、切换开关、范围滑块）。 **框架与平台支持** Flowbite UI 组件原生支持 RTL（从右至左）布局，可通过 `dir="rtl"` 属性启用。目前存在由社区维护的针对 React、Vue、Svelte、Angular 和 Qwik 的独立库。由于该库依赖于 vanilla JavaScript，因此还提供了针对 Next.js、Remix、Nuxt、Astro、MeteorJS、Gatsby、SolidJS 和 Qwik 等前端框架，以及 Laravel、Symfony、Ruby on Rails 7、Phoenix (Elixir)、Django 和 Flask 等后端框架的集成指南。 **相关资源** 该项目指向了同一生态系统中的其他资源：Figma 设计系统、预制的 "Flowbite Blocks" 区块、图标集以及一个 GPT 助手。除了开源版本外，还提供商业 Pro 版本。仓库链接到了 Discord 等社区频道以及 npm 下载/版本徽章。许可证为 MIT。