Fluent-UI 一套受 Fluent Design System 啟發的 React 元件庫

陳月半啦發表於2019-10-04

1. 前言

Website | Github

React 元件庫已經有好多了,其中也有很多高質量的範例,但是如果你看多了其他元件庫的樣式,我相信 Fluent-UI 可以給你一個別致的選擇。

2. 亮點

Acrylic

acrylic

實現 Acrylic 效果的過程可謂是驚喜連連,最開始它的實現是繼承父級的 background 並且通過 filter 附加模糊的效果,這樣做不但依賴 background-attachment: fixed 而且一旦 background 寫在父級之上(比如 body)就無能為力了。

後來發現 backdrop-filter 可以完美解決上面的兩個問題,但是最開始的時候只有 safari 預設支援,chrome 必須開啟 Experimental Web Platform Features,後來 chrome77 突然預設支援了???於是 filter 方案變成了 "polyfill"。

想體驗 Acrylic 效果可以檢視 Box 元件。

毛玻璃真香

Reveal

reveal

因為存在效能問題,目前這還是個試驗中的功能。想體驗的可以檢視 CommandNavigation

除了使用特定元件以外,還封裝了 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 元件上的,所以 CommandNavigationCard 等基於 Box 的元件都預設支援 Acrylic 效果。

文件頁

docs

文件的框架考察了很久,最後使用了 GatsbyJS,因為他的 Markdown 外掛實在讓人難以拒絕,同時它豐富的生態能少踩不少坑。

還有要給大家安利一個超好用的部署方案 ZEIT Now,Gatsby 配合它一鍵部署,有興趣的小夥伴可以瞭解一下,不要錢。

為了給大家帶來更好的體驗,還特意實現了網站的 可編輯code(react-live),換皮換圖,搜尋(algolia),換語言功能。

3. 後話

從立項到這篇文章經歷了 4 個月的時間,實現了 20+ 個元件,也花了大量時間在文件頁的製作上,作者也是從這個過程中體會了開源專案的種種不易,各種包括 lerna、typescript、jss、打包 的坑是接連不斷的踩,當然收穫還是巨大的。

長期維護!目前最新版本 1.0.0-alpha 目前版本不適合用於生產環境,期待正式版

歡迎各位小夥伴 issues 提需求 提bug。

還有什麼問題想要交流可以在帖子下邊留言,或者加我微信 chensmoke,都會看。

相關文章