热门标签 | 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




推荐阅读
  • 这篇文章将揭示 Vue 和 React 组件库中五个鲜为人知的强大工具。这些工具均以纯 JavaScript 实现,功能卓越。其中,async-validator 是一个数据验证插件,不仅预置了 URL 和电子邮件的验证规则,还支持异步验证功能。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • 提升 Kubernetes 集群管理效率的七大专业工具
    Kubernetes 在云原生环境中的应用日益广泛,然而集群管理的复杂性也随之增加。为了提高管理效率,本文推荐了七款专业工具,这些工具不仅能够简化日常操作,还能提升系统的稳定性和安全性。从自动化部署到监控和故障排查,这些工具覆盖了集群管理的各个方面,帮助管理员更好地应对挑战。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • Python错误重试让多少开发者头疼?高效解决方案出炉
    ### 优化后的摘要在处理 Python 开发中的错误重试问题时,许多开发者常常感到困扰。为了应对这一挑战,`tenacity` 库提供了一种高效的解决方案。首先,通过 `pip install tenacity` 安装该库。使用时,可以通过简单的规则配置重试策略。例如,可以设置多个重试条件,使用 `|`(或)和 `&`(与)操作符组合不同的参数,从而实现灵活的错误重试机制。此外,`tenacity` 还支持自定义等待时间、重试次数和异常处理,为开发者提供了强大的工具来提高代码的健壮性和可靠性。 ... [详细]
  • NFT市场热度持续攀升,波卡能否抓住机遇迎来NFT夏季热潮?
    NFT市场热度持续攀升,波卡能否抓住机遇迎来NFT夏季热潮? ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 在深入研究 React 项目的过程中,特别是在探索 react-router 源码时,我发现了其中蕴含的中间件概念。这激发了我对中间件的进一步思考与整理。本文将详细探讨 Redux 中间件的原理及其在实际项目中的应用,帮助读者更好地理解和使用这一强大工具。通过具体示例和代码解析,我们将揭示中间件如何提升应用的状态管理和异步操作处理能力。 ... [详细]
  • React项目基础教程第五课:深入解析组件间通信机制 ... [详细]
  • 投融资周报 | Circle 达成 4 亿美元融资协议,唯一艺术平台 A 轮融资超千万美元 ... [详细]
  • 在使用 `useSelector` 选择器时,发现分派操作后状态未能实时更新。这可能是由于 React 组件的渲染机制或 Redux 的状态管理问题导致的。建议检查 `useSelector` 的依赖项和 `dispatch` 的调用时机,确保状态变化能够正确触发组件重新渲染。此外,可以考虑使用 `useEffect` 钩子来监听状态变化,以确保及时更新。 ... [详细]
  • 2017年12月7日:React中实现不同组件间的路由导航
    在React应用中,实现从首页到不同组件的路由导航是常见的需求。本文介绍了如何通过配置路由来实现这一功能。具体步骤包括:1. 在首页设置路由链接,使其能够跳转到不同的目标组件;2. 确保目标组件正确配置,特别是在导入时使用默认导出(`default`),以确保路由能够正常工作。此外,文章还提供了详细的代码示例,帮助开发者更好地理解和实现这一功能。 ... [详细]
  • 从无到有,构建个人专属的操作系统解决方案
    操作系统(OS)被誉为程序员的三大浪漫之一,常被比喻为计算机的灵魂、大脑、内核和基石,其重要性不言而喻。本文将详细介绍如何从零开始构建个人专属的操作系统解决方案,涵盖从需求分析到系统设计、开发与测试的全过程,帮助读者深入理解操作系统的本质与实现方法。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 本文整理了Java中io.fabric8.kubernetes.api.model.PodStatus.getConditions()方法的一些代码示例,展示了 ... [详细]
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社区 版权所有