FlyonUI - 开源的 Tailwind CSS 组件库正式上线 🚀

嘿，小伙伴们！👋

我们超级激动地宣布推出FlyonUI——一个完全免费且开放源代码的Tailwind CSS组件库**，这是我们一直在努力打造的。

这个库汇集了Tailwind CSS的优点，易于理解的类名和功能强大的JS插件，从而提供无缝的开发体验。

而且猜猜看？它在GitHub上供社区使用、贡献并加以改进。

嘿，一个小故事 💪

我们团队成员投入了大量的时间和热情来打造FlyonUI，现在我们非常高兴地免费提供它给大家使用！

我们非常希望你能试用并通过GitHub问题 或在评论区分享你的反馈。你的意见将帮助我们让FlyonUI更好用，让每个人都能受益。

zh: 此处省略 (chǔcǐ shěnglüè)

• 目录
• 概览
• 为什么选择FlyonUI？
• 功能
• 文档

• 开始使用

• NPM安装

• RTL（右到左）语言支持

• 可用组件

• 组件实例
• 社区支持
• 致谢
• 许可证

此处省略内容

FlyonUI官网 点击访问

FlyonUI是为了结合两种世界的优点：语义类的美感以及JavaScript插件的强大功能。

实际上，它利用了下面这些优点：

• Tailwind CSS 一个基于实用类的 CSS 框架，帮助您轻松地构建漂亮的网站，并且提高效率。
• DaisyUI 为 Tailwind CSS 添加组件语义类名，帮助您更快、更轻松地创建美观且可维护的网站。
• Preline 用于可访问和响应式 UI 的无式无头 Tailwind 插件。利用动画、过渡等特性增强体验。

单独使用 Tailwind CSS 可能会使 HTML 变得杂乱，充满大量实用类，这会让代码维护变得非常头疼。

除此之外，Tailwind CSS 或 DaisyUI 还没有提供如折叠面板（Accordion）、覆盖层（Overlay）、下拉菜单（Dropdowns）等交互式的 JavaScript 组件。

这里就是FlyonUI特别出色的地方。✨

FlyonUI 将语义类的优雅与交互式无头 JavaScript 插件结合在一起，为您提供一个强大的工具集，轻松创建出色且互动的用户界面。

• 美观且语义化的CSS样式: 使用具有语义类名的全面CSS组件，以确保代码库干净且易于阅读。
• 交互性和动态特性: 通过集成各种无头JavaScript插件，例如Accordion、Dropdown、Overlay等，为您的UI组件增添交互性和动态行为。
• 效率和生产力: 通过结合语义类和JavaScript插件的优势，享受更快更高效的开发体验。
• 可维护性和可扩展性: 通过一致的编码方法和强大的JavaScript插件，保持项目的可维护性和可扩展性。

1. 800+ 免费组件及示例：提供了超过800个符合无障碍标准的组件示例，满足您所有 WebApp 的需求。
2. 通用框架兼容性：无论在 React、Vue 还是其他地方，都与 Tailwind CSS 完全兼容。
3. 无限主题：利用 FlyonUI 的主题功能来自定义应用程序的外观和感觉。更多详情请参阅主题部分。
4. 无样式且无障碍的插件：无缝添加无样式且无障碍的插件，以实现功能而不牺牲设计。
5. 响应式与 RTL 支持：为响应式设计而构建，确保您的应用程序在所有设备上看起来很棒，并支持 RTL 语言。
6. 永久免费：永久免费，开源且为社区而建。

请参阅更全面的文档，可以访问flyonui.com。

FlyonUI 可以轻松地集成进任何现有的 Tailwind CSS 项目里。

使用npm进行安装

在使用 FlyonUI 之前，请确保已安装 Node.js 和 Tailwind CSS。

把 FlyonUI 作为依赖库安装一下：

在终端中运行以下命令来安装 flyonui：

       npm install flyonui

进入全屏，退出全屏

1. 将 FlyonUI 作为插件添加到您的 tailwind.config.js 文件中：

module.exports = {
  content: ["./node_modules/flyonui/dist/js/*.js"], // 如果您想用到 FlyonUI 的 JS 部分，就别忘了引入这里。

  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // 如果您想用到 FlyonUI 的 JS 部分，就别忘了引入这里。
  ]
}

全屏显示/退出全屏

这可以确保FlyonUI的样式设计在你整个项目中正确地应用。

如果你想包含某个特定的JS组件：

// 导出模块，其中包含accordion.js文件的路径
module.exports = {
  content: ["./node_modules/flyonui/dist/js/accordion.js"]
}

全屏模式 退出全屏

在您的 HTML 文件中包含 FlyonUI 的 JavaScript，放在 </body> 标签之前。为了使交互式元素生效，这样做是必要的。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../node_modules/flyonui/flyonui.js"></script>

您可以切换到全屏或退出全屏

对于单个组件，应使用特定的路径。

       <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../node_modules/flyonui/dist/js/accordion.js"></script>

进入全屏模式 退出全屏

此脚本保证所有FlyonUI的交互正确地应用到您的元素上。

从右到左语言支持 (RTL)

FlyonUI组件原生支持RTL布局。只需在您的HTML元素中添加dir="rtl"属性即可。

FlyonUI 提供了一个使用 Tailwind CSS 实用程序类构建的强大 UI 组件库，可实现快速高效的网页开发体验。我们的库包括超过 78 个组件，从基本元素（如按钮和卡片）到更复杂的第三方集成功能。

查看所有组件

组件示例（例如）

手风琴组件	警告	Apex图表插件
按钮	卡片	复选框
下拉菜单	输入	模态框
导航条	选项卡和标签	工具提示

查看所有组件

（注：此处使用了更口语化且自然的“社群”来翻译“Community”，并在其后添加了空格以增强可读性。）

加入 FlyonUI 社区大家庭，讨论库的使用，提问并分享您的使用经历，交流心得。

• 📢 关注我们 在 Twitter 上
• ⌨️ 参与 GitHub 上的讨论，

我们非常感激开源社区的贡献，特别要感谢的是：

你可以看看这些工具：

• TailwindCSS
• daisyUI
• Preline UI。

这些项目构成了FalyonUI的支柱，使我们能够打造一个强大的UI工具套件，且用户友好。

FlyonUI 是遵循 MIT 许可证的开源软件。

• 📝 阅读许可证
• 📖 查看第三方许可协议