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

• 1.0.0-alpha.2
  • 重构 @fluent-ui/hooks 以支持按需引入
  • 重构 Radio Select Tabs Toggle Tooltip ItemGroup Input Dialog Navigation Command，提升性能
• 1.0.0-alpha.1
  • reveal 效果改用 css var() 实现，性能有明显改善。
  • 文档首页开始按钮不用再等那么久才能点啦~