热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab
介绍

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


a239710e347f7610cdb37961613faa36.png

如何获取?

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


7f82a3afb3687b12e8d67437b200ec81.png

谁在使用?

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


7ae65f8435edd42239b7312953f9ac32.png

组件一览

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

  • Web端

51aaff3662f6f5986bbfd43d570ebfaf.png

dfe87684f5e30f6f7fd953fe0f0f3b5c.png

b306929050cba565d906bf6b72ed7491.png

  • Android端

5a13640f6a66308c231f04358cfb1097.png

  • iOS端

d4384ab8aa2e7717531d571cff957906.png

8241f6dbfeb55d2e4f6a0f63c2c2ac7a.png

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

  • 按钮

ca4af9ad707bfb8adcdf29980f45f13c.png

  • 下拉选择

c59ca8c89d566e9eb1a54d38620eef0c.png

  • 搜索框

d0d8079bfb9546317f53f5c6f6bcdd7a.png

  • 时间选择框

f5c2d637b82a65eddd366b7a10865d5f.png

  • 颜色选择框

134a5c3f254c786c56f7f048647a5bb3.png

  • 列表表格

bec9b25f1c06fc4766252e81efec9409.png

  • 工具栏

3836670fb8a8cc8103e6fba327c1debb.png

  • 消息提示栏

a940881dc104f7296332ff83206aee2d.png

  • 边栏提示

a7e3d7a47478163969044c23d2f342f7.png

  • 进度条

27d33cb4d8916127374535b931be0b8f.png

  • 正在加载

4d2ce859db4b1ee7c24bb2b4d9796780.png

  • loading

9c982b0534bfb40cb22bc11872568189.png

  • 模态框(可选拖拽)

716c089d2fa2edff116039cf4e537b8f.png

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

总结

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


2a930061f58d02cbe4ad2c456299e87a.png




推荐阅读
  • 本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线(Event Bus)实现中的使用方法。RxJava是一种基于观察者模式的异步java库,可以提高开发效率、降低维护成本。通过RxJava,开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说,本文将详细介绍如何利用RxJava实现事件总线,并提供了使用建议。 ... [详细]
  • 腾讯T3大牛亲自教你!2021大厂Android面试经验,经典好文
    本篇将由环境搭建、实现原理、编程开发、插件开发、编译运行、性能稳定、发展未来等七个方面,对当前的ReactNative和Flutter进行全面的分析对比, ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ... [详细]
  • MATLAB函数重名问题解决方法及数据导入导出操作详解
    本文介绍了解决MATLAB函数重名的方法,并详细讲解了数据导入和导出的操作。包括使用菜单导入数据、在工作区直接新建变量、粘贴数据到.m文件或.txt文件并用load命令调用、使用save命令导出数据等方法。同时还介绍了使用dlmread函数调用数据的方法。通过本文的内容,读者可以更好地处理MATLAB中的函数重名问题,并掌握数据导入导出的各种操作。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 恶意软件分析的最佳编程语言及其应用
    本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言,并重点讨论了Python的优点。Python是一种解释型、多用途的语言,具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验,包括快速复制恶意软件组件以更好地理解其工作。此外,作者还提到了Python的跨平台优势,使得在不同操作系统上运行代码变得更加方便。 ... [详细]
  • java drools5_Java Drools5.1 规则流基础【示例】(中)
    五、规则文件及规则流EduInfoRule.drl:packagemyrules;importsample.Employ;ruleBachelorruleflow-group ... [详细]
  • Java如何导入和导出Excel文件的方法和步骤详解
    本文详细介绍了在SpringBoot中使用Java导入和导出Excel文件的方法和步骤,包括添加操作Excel的依赖、自定义注解等。文章还提供了示例代码,并将代码上传至GitHub供访问。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
  • 认识Vue关于Vue的描述有不少,不外乎都会拿来与Angular和React对比,同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多,但到目前为止,Angul ... [详细]
  • 今天终于成功使用ReactNative打包APK成功,IOS暂时没有 ... [详细]
author-avatar
Sunshine5585
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有