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 (
    
      1
      2
      3
    
  )
}

Icon

Fluent-UI 的图标基于 RemixIcon 二次开发。

所有图标基于 svg，这样你可以只打包引用的图标而不是加载整个字体文件。

安装

yarn add @fluent-ui/icons

使用

import BankFillIcon from '@fluent-ui/icons/BankFill'

function App () {
  return (
    
  )
}

Box + theme

Fluent-UI 采用了 react-jss + styled-system 的组合，Box 组件可封装您的组件并且实现大部分 CSS 需求。

你可以在 Box 上直接使用主题内的 color shadow breakpoint 等，可以查看默认主题或修改默认主题


  Hello

另外 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() 实现，性能有明显改善。
- 文档首页开始按钮不用再等那么久才能点啦~