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

最新推荐文章于 2022-07-31 15:13:44 发布

weixin_39943868

最新推荐文章于 2022-07-31 15:13:44 发布

阅读量97

点赞数

文章标签：安卓select模态框样式改变

介绍

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 (

Standard

Primary

); } private _alertClicked(): void { alert('Clicked'); }}

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