1. 前言
React 組件庫已經有好多了，其中也有很多高質量的範例，但是如果你看多了其他組件庫的樣式，我相信 Fluent-UI 可以給你一個別致的選擇。
2. 亮點
Acrylic
實現 Acrylic 效果的過程可謂是驚喜連連，最開始它的實現是繼承父級的 background 並且通過 filter 附加模糊的效果，這樣做不但依賴 background-attachment: fixed 而且一旦 background 寫在父級之上(比如 body)就無能爲力了。
後來發現 backdrop-filter 可以完美解決上面的兩個問題，但是最開始的時候只有 safari 默認支持，chrome 必須開啓 Experimental Web Platform Features，後來 chrome77 突然默認支持了？？？於是 filter 方案變成了 "polyfill"。
想體驗 Acrylic 效果可以查看 Box 組件。
毛玻璃真香
Reveal
因爲存在性能問題，目前這還是個試驗中的功能。想體驗的可以查看 Command、Navigation
除了使用特定組件以外，還封裝了 hooks 的調用方式：
- 安裝
yarn add @fluent-ui/hooks- 使用
import { useReveal } from '@fluent-ui/hooks'
function App () {
const [RevealWrapper] = useReveal(66)
return (
<div>
<RevealWrapper><div>1</div></RevealWrapper>
<RevealWrapper><div>2</div></RevealWrapper>
<RevealWrapper><div>3</div></RevealWrapper>
</div>
)
}Icon
Fluent-UI 的圖標 基於 RemixIcon 二次開發。
所有圖標基於 svg，這樣你可以只打包引用的圖標而不是加載整個字體文件。
- 安裝
yarn add @fluent-ui/icons- 使用
import BankFillIcon from '@fluent-ui/icons/BankFill'
function App () {
return (
<BankFillIcon />
)
}Box + theme
Fluent-UI 採用了 react-jss + styled-system 的組合，Box 組件可封裝您的組件並且實現大部分 CSS 需求。
你可以在 Box 上直接使用主題內的 color shadow breakpoint 等，可以查看 默認主題或修改默認主題
<Box
fontSize={4}
fontWeight='bold'
padding={3}
margin={[ 4, 5 ]}
color='standard.default'
bg='primary.default'
boxShadow="1"
>
Hello
</Box>另外 Acrylic 是實現在 Box 組件上的，所以 Command、Navigation、Card 等基於 Box 的組件都默認支持 Acrylic 效果。
文檔頁
文檔的框架考察了很久，最後使用了 GatsbyJS，因爲他的 Markdown 插件實在讓人難以拒絕，同時它豐富的生態能少踩不少坑。
還有要給大家安利一個超好用的部署方案 ZEIT Now，Gatsby 配合它一鍵部署，有興趣的小夥伴可以瞭解一下，不要錢。
爲了給大家帶來更好的體驗，還特意實現了網站的 可編輯code(react-live)，換皮，換圖，搜索(algolia)，換語言功能。
3. 後話
從立項到這篇文章經歷了 4 個月的時間，實現了 20+ 個組件，也花了大量時間在文檔頁的製作上，作者也是從這個過程中體會了開源項目的種種不易，各種包括 lerna、typescript、jss、打包 的坑是接連不斷的踩，當然收穫還是巨大的。
長期維護！
目前版本不適合用於生產環境，期待正式版
歡迎各位小夥伴 issues 提需求 提bug。
還有什麼問題想要交流可以在帖子下邊留言，或者加我微信 chensmoke，都會看。
4. 更新
最新版本 1.0.0-alpha.1
-
1.0.0-alpha.1- reveal 效果改用
css var()實現，性能有明顯改善。 - 文檔首頁開始按鈕不用再等那麼久才能點啦~
- reveal 效果改用