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

• 1.0.0-alpha.1

  • reveal 效果改用 css var() 实现，性能有明显改善。
  • 文档首页开始按钮不用再等那么久才能点啦~