介绍

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端

• 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<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
const classNames = getClassNames(exampleStyles, {});
export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
 public render(): JSX.Element {
 const { disabled, checked } = this.props;
 return (
 <div className={css(classNames.twoup)}>
 <div>
 <Label>Standard</Label>
 <DefaultButton
 data-automation-id="test"
 allowDisabledFocus={true}
 disabled={disabled}
 checked={checked}
 text="Standard Button"
 onClick={this._alertClicked}
 />
 </div>
 <div>
 <Label>Primary</Label>
 <PrimaryButton
 data-automation-id="test"
 disabled={disabled}
 checked={checked}
 text="Primary Button"
 onClick={this._alertClicked}
 allowDisabledFocus={true}
 />
 </div>
 </div>
 );
 }
 private _alertClicked(): void {
 alert('Clicked');
 }
}

以微软的行事风格来看，使用这种写法不足为奇，因为typescript就是它搞出来的，其实也对，对比强类型typeScipt和弱类型Javascript来看，typescript的写法更加的严格一些，避免了写代码时候的出错几率！下面有选择性的查看一些组件的风格样式：

• 按钮

• 下拉选择

• 搜索框

• 时间选择框

• 颜色选择框

• 列表表格

• 工具栏

• 消息提示栏

• 边栏提示

• 进度条

• 正在加载

• loading

• 模态框（可选拖拽）

以上是一些组件的截图，大家可以直接查看官网文档，本文不在详细介绍

总结

虽然从UI上来看，貌似并不是很好看，但是足够简练，功能也很丰富，不然也不会有那么多office产品使用了，如果你对它感兴趣，不妨试一试！