阅读 2413

Fluent-UI 一套受 Fluent Design System 启发的 React 组件库

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

因为存在性能问题,目前这还是个试验中的功能。想体验的可以查看 CommandNavigation

除了使用特定组件以外,还封装了 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 组件上的,所以 CommandNavigationCard 等基于 Box 的组件都默认支持 Acrylic 效果。

文档页

docs

文档的框架考察了很久,最后使用了 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() 实现,性能有明显改善。
    • 文档首页开始按钮不用再等那么久才能点啦~
关注下面的标签,发现更多相似文章
评论