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

時間 2021-04-21

標籤 css react git github chrome typescript shell npm 微信 app 欄目 React 简体版

原文原文鏈接

1. 前言

React 組件庫已經有好多了，其中也有不少高質量的範例，可是若是你看多了其餘組件庫的樣式，我相信 Fluent-UI 能夠給你一個別致的選擇。react

2. 亮點

Acrylic

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

後來發現 backdrop-filter 能夠完美解決上面的兩個問題，可是最開始的時候只有 safari 默認支持，chrome 必須開啓 Experimental Web Platform Features，後來 chrome77 忽然默認支持了？？？因而 filter 方案變成了 "polyfill"。github

想體驗 Acrylic 效果能夠查看 Box 組件。chrome

毛玻璃真香typescript

Reveal

由於存在性能問題，目前這仍是個試驗中的功能。想體驗的能夠查看 Command、Navigationshell

除了使用特定組件之外，還封裝了 hooks 的調用方式：npm

安裝

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，這樣你能夠只打包引用的圖標而不是加載整個字體文件。app

安裝

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 效果。