office兼容包-微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI

介绍

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();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的写法更加的严格一些，避免了写代码时候的出错几率！下面有选择性的查看一些组件的风格样式：

• 按钮

---

---

• 下拉选择

---

---

• 搜索框

---

---

• 时间选择框

---

---

• 颜色选择框

---

---

• 列表表格

---

---

• 工具栏

---

---

• 消息提示栏

---

---

• 边栏提示

---

---

• 进度条

---

---

• 正在加载

---

---

• loading

---

---

• 模态框（可选拖拽）

---

---

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

总结

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

---

---