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
原创文章:React-UWP 一套实现 UWP Design 和 Fluent Design 的 React 开源UI库 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/react-uwp.html)

发表评论

请登录后发表评论: