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

陳月半啦發表於2019-10-04
UIReact元件

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

因為存在效能問題，目前這還是個試驗中的功能。想體驗的可以檢視 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 效果。

文件頁

docs

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

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

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

3. 後話

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

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

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

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

相關文章