React-UWP 一套实现 UWP Design 和 Fluent Design 的 React 开源UI库

官方在线文档GitHub 地址

关于 React-UWP

React-UWP 主要是在去年下半年开始开发的,因为对 Windows 的 UWP 设计规范情有独钟,而自己又是 React 热衷者,而 WinJS 组件又比较简陋粗糙的,于是 React-UWP 就变成个人业余的长期项目了。

一开始,技术选型就是 TypeScript 和 React, 因为 TypeScript 在这大型的代码管理上比普通 Babel 项目好,主要体现在 API 修改和类型检查方面,每次修改 API 在编译时就能把已知错误检测出来。编写样式主要通过 Inline-style 写的(一部分考虑到以后支持 React-Native),Polyfill 主要通过 inline-style-prefixer 实现的。因为 React-UWP 的主题是完全自己搭配的,所以也用到了 React Context 的属性,所有组件都是通过 context 的 theme 来配置的。其中从 Material-UI 学到不少东西,项目管理,脚本构建等等。

今年五月辞职后,就开始全职开发 React-UWP 了,这时候官方出了新的 Fluent Design System,于是乎,也为 React-UWP 所有组件添加 Fluent Design 的效果。总而言之,这是个还算花了多精力开发的 UI 库,接触学习的前端内容也挺多的。开发 Docs 文档的时候,比较有意思,都会一开始在 Illustrator 上画原型,然后再写出来。

使用场景

React-UWP 主要适合于比较现代化的网页设计,例如 WebApp、官网首页、新闻资讯网站等等,当然这只是一个 UWP 设计规范的 UI库 而已,你可以从全局 Context 样式中自己设计更好的 Web 应用。

浏览器兼容

React-UWP 支持 所有的现代浏览器,支持IE9 With Polyfills或以上。(就是 React 的浏览器兼容)。

开发技术与特点

  • NPM + Webpack + TypeScript + React
  • 基于 Web 开发的 API 设计,部分和 Xaml 的 API 有所不同
  • 49+ 组件
  • 封装了针对浏览器的 ScrollReveal 组件
  • 封装了基于 react-transition-group 的 Animate 组件

完整的组件文档

React-UWP 的文档,详细的包含了每个组件的使用和介绍该组件的 Props 和 Members。

v2-84710ad139ef024bf1062e009f8c99e1_b

自定义的色板

v2-7f9b4ca1164faee030570f558c8583c3_b

部分组件截图展示(四个主题)

更多的样式,自定义颜色,自定义背景,可以访问 官方文档 尝试。

v2-694cdf358851fcf66208b4cdcccc1566_bv2-ed0b8175f3ee3c91aea826fa568f1644_bv2-53d7427b0936733566c74bb30c5eb908_bv2-865f66e40ec00f6d2b73d9e8d975adc4_b

后记

React-UWP 是完全可以自定义整个主题的,就算有些组件不符合特定的产品需求,也是可以对其组件进行自定义样式的。

v2-5f55814cb9e304fad68d311f0e51f100_b

Todo

  • Toast
  • ScrollBar
  • SemanticZoom
  • PullRefresh

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流