聲明：該文章由作者（Yua）發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意并請(qǐng)附上出處(0XUCN)及本頁鏈接。。

說起組件庫，我們首先想到的就是?Element、Ant Desgin、Arco Design?這些。但是我們需要知道的是，除了這些國內(nèi)開源的組件庫之外，還有很多其他的組件庫。

所以，今天我們就為大家介紹一個(gè)最新開源的組件庫?FlyonUI，它是基于?tailwindcss?進(jìn)行構(gòu)建的

?根據(jù)他的發(fā)布記錄，該組件庫是?2024 年 10 月 1 日?發(fā)布的，目前最新的版本是?V1.0.2。發(fā)布 4 天時(shí)間，擁有?300+?的?star，還是非常不錯(cuò)的

使用方式

1. FlyonUI?是不支持?CDN?引入的，這意味著我們必需要通過?npm?進(jìn)行安裝?npm install flyonui。同時(shí)還需要注意?必須安裝?tailwidncss

2. 安裝好之后，需要在?tailwind.config.js?文件并添加 FlyonUI 作為插件

module.exports?=?{?
??content:?["./node_modules/flyonui/dist/js/*.js"],?
??plugins:?[
????require("flyonui"),
????require("flyonui/plugin")?
??]
}

1. 開始 JS 交互

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

組件特性

FlyonUI?的組件風(fēng)格與大家所熟悉的組件風(fēng)格差距較大，它是基于自己獨(dú)特 設(shè)計(jì)風(fēng)格（Desgin）的一種模式，并且沿用了?Tailwindcss?的 “原子級(jí) css” 風(fēng)格

我們以常用的?button?組件為例，先來看下對(duì)應(yīng)的樣式：

點(diǎn)擊?HTML?部分既可看到對(duì)應(yīng)的?使用方案

沒錯(cuò)，F(xiàn)lyonUI?的使用與傳統(tǒng)組件庫完全不同，它是通過?class?類名的方式制定對(duì)應(yīng)樣式的。如果不熟悉?tailwindcss?的同學(xué)，可以類比最早的?bootstrap?使用方式。

那么看到這里有同學(xué)就可以會(huì)疑惑了：**既然是組件，那么就要提供?功能，而不能?僅僅是樣式**。如果它通過?class?來進(jìn)行使用，那么如何提供組件的功能呢？

我們以?loading?功能為例：

如果想要使用?loading?那么需要采用?組合的 html 結(jié)構(gòu)進(jìn)行

如果要在框架中進(jìn)行使用的話，那么需要這樣做：

//?vue
<button?class="btn?btn-square?btn-primary"?aria-label="Loading?Button">
??<span?v-if="isLoading"?class="loading?loading-spinner"></span>
</button>

//?react
<button?className="btn?btn-square?btn-primary"?aria-label="Loading?Button">
??{isLoading?&&?<span?className="loading?loading-spinner"></span>}
</button>

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/