Fluent-UI 一套受 Fluent Design System 啓發的 React 組件庫

1. 前言

Website | Github

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.2

• 1.0.0-alpha.2
  • 重構 @fluent-ui/hooks 以支持按需引入
  • 重構 Radio Select Tabs Toggle Tooltip ItemGroup Input Dialog Navigation Command，提升性能
• 1.0.0-alpha.1
  • reveal 效果改用 css var() 實現，性能有明顯改善。
  • 文檔首頁開始按鈕不用再等那麼久才能點啦~