关于 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。
自定义的色板
部分组件截图展示(四个主题)
更多的样式,自定义颜色,自定义背景,可以访问 官方文档 尝试。
后记
React-UWP 是完全可以自定义整个主题的,就算有些组件不符合特定的产品需求,也是可以对其组件进行自定义样式的。
Todo
- Toast
- ScrollBar
- SemanticZoom
- PullRefresh