office ui设计（Office风格的开源多端支持组件库）

小君 2023-03-27 10:10:14 771

office ui设计（Office风格的开源多端支持组件库）虽然从UI上来看，貌似并不是很好看，但是足够简练，功能也很丰富，不然也不会有那么多office产品使用了，如果你对它感兴趣，不妨试一试！以上是一些组件的截图，大家可以直接查看官网文档，本文不在详细介绍笔者主要带大家体验下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 { twou

介绍

Fabric UI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fabric React是一组强大的基于React的组件，旨在能够使用Office设计语言轻松创建一致的Web体验。Fabric Android最新的控件是使用Kotlin构建的，并且与Java完全兼容，Fabric iOS最新的控件是使用Swift构建的，并且与Objective-C兼容。三大微软组件库，喜欢微软风格的小伙伴们不要错过了！

office ui设计（Office风格的开源多端支持组件库）(1)

如何获取？

fabric UI是开源产品，因此你可以直接在Github上获取到它，从代码提交以及发布情况（接近3000次发布，419位开发者参与，总计6000 次提交）来看，微软的更新和迭代是非常活跃的，也就意味着这显然是微软比较用心的产品！

office ui设计（Office风格的开源多端支持组件库）(2)

谁在使用？

微软超过45个网站或者产品使用了它，其中就包括Word PowerPoint 以及 Excel 再到 PowerBI等等

office ui设计（Office风格的开源多端支持组件库）(3)

组件一览

组件分为三个平台类型，Web、Android、iOS平台

Web端

office ui设计（Office风格的开源多端支持组件库）(4)

office ui设计（Office风格的开源多端支持组件库）(5)

office ui设计（Office风格的开源多端支持组件库）(6)

Android端

office ui设计（Office风格的开源多端支持组件库）(7)

iOS端

office ui设计（Office风格的开源多端支持组件库）(8)

office ui设计（Office风格的开源多端支持组件库）(9)

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