安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——FabricUI...

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

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

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

组件分为三个平台类型&＃xff0c;Web、Android、iOS平台

• Web端

• Android端

• iOS端

笔者主要带大家体验下Web端的组件&＃xff0c;Android和iOS平台的可以自行到微软Fabric官网查看。

首先看下代码写法&＃xff1a;

import * as React from &＃39;react&＃39;;import { css, classNamesFunction, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton } from &＃39;office-ui-fabric-react&＃39;;type IButtonBasicExampleStyleProps &＃61; {};interface IButtonBasicExampleStyles { twoup?: IStyle;}const exampleStyles: IButtonBasicExampleStyles &＃61; { twoup: [ &＃39;ms-BasicButtonsTwoUp&＃39;, { display: &＃39;flex&＃39;, selectors: { &＃39;& > *&＃39;: { flexGrow: 1 }, &＃39;.ms-Label&＃39;: { marginBottom: &＃39;10px&＃39; } } } ]};const getClassNames &＃61; classNamesFunction();const classNames &＃61; getClassNames(exampleStyles, {});export class ButtonDefaultExample extends React.Component { public render(): JSX.Element { const { disabled, checked } &＃61; this.props; return (

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

• 按钮

• 下拉选择

• 搜索框

• 时间选择框

• 颜色选择框

• 列表表格

• 工具栏

• 消息提示栏

• 边栏提示

• 进度条

• 正在加载

• loading

• 模态框(可选拖拽)

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

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