飞扬UI（FlyonUI）使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00126/article/details/146722663

飞扬UI（FlyonUI）使用教程

flyonui 🚀 The easiest, free and open-source Tailwind CSS component library with semantic classes. 项目地址: https://gitcode.com/gh_mirrors/fl/flyonui

1. 项目介绍

飞扬UI（FlyonUI）是一个易于使用、完全免费且开源的Tailwind CSS组件库，它结合了语义化类名的美学和JS插件的强大功能。它使用Tailwind CSS的实用性和daisyUI的语义化类名，以及Preline的无样式且可访问的Tailwind插件，为开发者提供了一个构建美观、交互式用户界面的强大工具包。

2. 项目快速启动

环境准备

在开始之前，请确保您的系统中已安装了Node.js和Tailwind CSS。

安装FlyonUI

通过npm将FlyonUI安装为项目依赖：

npm install flyonui

配置Tailwind CSS

在您的app.css文件中包含FlyonUI：

@import 'tailwindcss';
@plugin 'flyonui';
@import './node_modules/flyonui/variants.css'; // 如果您想使用FlyonUI的JS组件

引入JavaScript组件

如果您想在项目中使用特定的JS组件，如手风琴、下拉菜单、模态框等，您需要在HTML文件的</body>标签之前引入FlyonUI的JavaScript文件：

<script src="../node_modules/flyonui/flyonui.js"></script>

如果只需要单个组件，可以使用特定的路径：

<script src="../node_modules/flyonui/dist/accordion.js"></script>

RTL语言支持

FlyonUI组件支持从右到左的语言排列。要启用此功能，只需在HTML元素中添加dir="rtl"属性。

3. 应用案例和最佳实践

以下是一些使用FlyonUI构建的应用案例和最佳实践：

Accordion（手风琴）

<div class="flyonui-accordion">
  <div class="flyonui-accordion-item">
    <h2 class="flyonui-accordion-header">标题1</h2>
    <div class="flyonui-accordion-content">内容1</div>
  </div>
  <!-- 更多项 -->
</div>

Button（按钮）

<button class="flyonui-btn">点击我</button>

Card（卡片）

<div class="flyonui-card">
  <img src="image.jpg" class="flyonui-card-image">
  <div class="flyonui-card-body">
    <h2 class="flyonui-card-title">标题</h2>
    <p class="flyonui-card-description">描述</p>
  </div>
</div>

Dropdown（下拉菜单）

<div class="flyonui-dropdown">
  <button class="flyonui-dropdown-button">下拉菜单</button>
  <div class="flyonui-dropdown-content">
    <a href="#" class="flyonui-dropdown-item">选项1</a>
    <!-- 更多选项 -->
  </div>
</div>