介绍
Fabric UI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fabric React是一组强大的基于React的组件,旨在能够使用Office设计语言轻松创建一致的Web体验。Fabric Android最新的控件是使用Kotlin构建的,并且与Java完全兼容,Fabric iOS最新的控件是使用Swift构建的,并且与Objective-C兼容。三大微软组件库,喜欢微软风格的小伙伴们不要错过了!
如何获取?
fabric UI是开源产品,因此你可以直接在Github上获取到它,从代码提交以及发布情况(接近3000次发布,419位开发者参与,总计6000+次提交)来看,微软的更新和迭代是非常活跃的,也就意味着这显然是微软比较用心的产品!
谁在使用?
微软超过45个网站或者产品使用了它,其中就包括Word, PowerPoint 以及 Excel 再到 PowerBI等等
组件一览
组件分为三个平台类型,Web、Android、iOS平台
Web端体验
笔者主要带大家体验下Web端的组件,Android和iOS平台的可以自行到微软Fabric官网查看。
首先看下代码写法:
import * as React from 'react';import { css, classNamesFunction, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton } from 'office-ui-fabric-react';type IButtonBasicExampleStyleProps = {};interface IButtonBasicExampleStyles { twoup?: IStyle;}const exampleStyles: IButtonBasicExampleStyles = { twoup: [ 'ms-BasicButtonsTwoUp', { display: 'flex', selectors: { '& > *': { flexGrow: 1 }, '.ms-Label': { marginBottom: '10px' } } } ]};const getClassNames = classNamesFunction();const classNames = getClassNames(exampleStyles, {});export class ButtonDefaultExample extends React.Component { public render(): JSX.Element { const { disabled, checked } = this.props; return (
); } private _alertClicked(): void { alert('Clicked'); }}
以微软的行事风格来看,使用这种写法不足为奇,因为typescript就是它搞出来的,其实也对,对比强类型typeScipt和弱类型Javascript来看,typescript的写法更加的严格一些,避免了写代码时候的出错几率!下面有选择性的查看一些组件的风格样式:
以上是一些组件的截图,大家可以直接查看官网文档,本文不在详细介绍
总结
虽然从UI上来看,貌似并不是很好看,但是足够简练,功能也很丰富,不然也不会有那么多office产品使用了,如果你对它感兴趣,不妨试一试!