Ant Design Mobile 5.6.0版本来了
一、Ant Design Mobile介绍
Ant Design Mobile( 官网地址:Ant Design Mobile - Ant Design Mobile ) 是由支付宝设计团队基于蚂蚁集团的众多业务实践,亿万用户的验证反馈,抽象构建出的移动端资产库。希望可以帮助设计师们脑海中的 idea 轻松转变为自然好用的设计,给用户更真实自然的体验。
Ant Design Mobile功能特性:
高性能
无需配置,即可拥有最佳的包体积大小和最优的性能
可定制
基于 CSS 变量,可以灵活地调整组件外观或自由创造自己的主题
原子化
每个组件提供的功能,恰到好处地满足业务所需
流畅
拥有流畅的手势交互和细致的动画展示,助力打造极致体验
二、Ant Design Mobile版本更新
2022年2月21日 Ant Design Mobile5.0 首次进行发布,根据GitHub的描述,Ant Design Mobile5.0 版本是一次彻底的重做,它带来了全新的设计体验和 100% 重写的组件代码实现。
2022年2月21日-2022年3月12日,Ant Design Mobile在基于5.0版本的基础上再次更新了10个版本,截止到2022年3月12日 Ant Design Mobile5.6.0也进行了发布。
Ant Design Mobile5.6.0
【特性】
【优化】 在 Cascader 和 CascaderView 当层级减少时,会自动选择到最后一个可选的层级
【修复】 Checkbox & Radio 调整了 onClick 的行为,修复了一些内部元素的点击事件无法被外层捕获的问题 修复了 Badge 内容如果为数字 0,会无法正常显示的问题 修复了 Modal Dialog ImageViewer ActionSheet 组件调用 show() 后如果立即调用 close() / clear() 可能会无法正确地关闭弹层的问题
那目前我们是否可以在项目中直接使用Ant Design Mobile5.6.0版本呢?
引用Ant Design Mobile GitHub中解释:
5.0 版本已经在蚂蚁、阿里、菜鸟的诸多线上项目中落地使用,经过了非常复杂全面的使用场景的考验。我们相信对于新项目,现在直接使用 5.0 版本,并持续地跟进我们后续的升级,是毋庸置疑的最优选择。
不难看出,Ant Design Mobile5.6.0是可以项目开发中直接使用的。
三、Ant Design Mobile 使用
1、安装 create-react-app
脚手架
因为 Ant Design Mobile 是基于React的移动端组件库,首先我们需要安装好 React官方提供的脚手架 create-react-app
注意:如果你之前通过
npm install -g create-react-app
全局安装过create-react-app
,建议你使用npm uninstall -g create-react-app
或yarn global remove create-react-app
卸载该包,以确保npx始终使用最新版本。
create-react-app
安装命令:// 全局安装 npm install -g create-react-app // 检查版本 create-react-app --version如果能够出现
create-react-app
版本号,说明安装成功(注意:由于create-react-app
在 2021-12-14更新到5.0.0版本,所以我们目前安装的是最新版本)
2、通过create-react-app
创建项目
create-react-app
创建项目命令如下:
以下选择
npx
或npm
或yarn
命令创建
(1)、使用npx命令创建
# 创建项目,注意:这里创建项目是 npx 而不是npm npx create-react-app my-app # 切换到项目中 cd my-app # 启动创建好的项目 npm start
(2)、使用npm命令创建
# 创建项目 npm init react-app my-app # 切换到项目中 cd my-app # 启动创建好的项目 npm start
(3)、使用yarn命令创建
# 创建项目 yarn create react-app my-app # 切换到项目中 cd my-app # 启动创建好的项目 yarn start
启动创建的好的项目,就可以再浏览器中显示如下图所示内容:
创建好的目录结构如下图所示:
3、安装 Ant Design Mobile5.6.0
安装命令如下:
npm install --save antd-mobile@5.6.0 # or yarn add antd-mobile@5.6.0
4、使用Ant Design Mobile5.6.0中的组件
APP.js
import logo from './logo.svg' import './App.css' import React from 'react' // 引入 button组件 import { Button } from 'antd-mobile' function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /> {/* button组件的使用 */}<Button color="primary">Primary</Button></header></div> ) } export default App
浏览器中显示如下图所示:
打开浏览器调试器,打开浏览器的移动端调试工具,显示如下图所示:
在线体验地址:
antd-mobile - CodeSandbox
其它组件的使用可以继续参考 Ant Design Mobile中的说明进行使用。
四、结束语
以上是关于Ant Design Mobile5.6.0的版本更新说明和使用。
TabBar.Item 的 title 属性现在支持渲染函数动态生成内容了
FloatingBubble 增加了 --background CSS 变量
ActionSheet 增加了 popupClassName 和 popupStyle 属性 #4910
Ant Design Mobile 5.6.0版本来了相关推荐
- 2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
- Ant Design Mobile是什么?
Ant Design Mobile简称antd-mobile,是Ant Design的移动规范的React实现,是一个基于Preact/React/React Native的UI组件库:UI样式高度可 ...
- react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验 将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
- 如何修改ant design mobile或者其他UI组件的全局样式
问题描述: 有时候你可能会遇到一些前端CSS实现上的问题,因为美工的画图与你的项目使用的UI框架的样式大有出入,所以在写页面样式的时候多多少少会让你有些头疼,那么该类问题应该如何解决呢? 原因分析: ...
- ant design mobile listView 使用
ListView.DataSource 的使用 https://cloud.tencent.com/developer/section/1373979 https://mobile.ant.desig ...
- 重磅:微信安卓 8.0 版本来了,赶紧抢先内测体验吧
loonggg 读完需要 3 分钟 速读仅需 1 分钟 微信就是这样,每一次的更新,都有鄙视 Android 的感觉.每一次都是苹果抢先体验最新版的东西.(不想看文章的,可以直接拉到文末,直接获取新版 ...
- 机车安装鸿蒙系统,华为鸿蒙系统2.0版本来了:9月11日发布 打通PC、手表、车机等...
去年 8 月份,华为正式发布了自主研发的鸿蒙系统 ( HarmonyOS ) 系统,根据规划路线图,今年鸿蒙 OS 将会升级到 2.0 版本,并且打通 PC.手表和车机等产品终端.根据国内媒体的报道, ...
- SOTA!目标检测开源框架YOLOv6 3.0版本来啦
近日,美团视觉智能部发布了 YOLOv6 3.0 版本,再一次将目标检测的综合性能推向新高.YOLOv6-L6 检测精度和速度超越 YOLOv7-E6E,取得当前实时目标检测榜单 SOTA.本文主要介 ...
- ant react 上传_react之ant design mobile如何只能上传一张图片
这样不就好了,外边的样式你自己搞吧 multiple={true}是说你点上传框之后,一次性可以选一张还是多张图,false就只能一张张的上传 class ImagePickerExample ext ...
最新文章
- 吐血整理:手拿几个大厂 Offer 的秘密武器!
- oracle 日期 extract,ORACLE——EXTRACT() 截取日期时间的函数使用
- 11.3finally块控制的读取文件释放
- ASP.NET Core端点路由 作用原理
- python爬虫爬图片教程_python爬虫实战之爬取京东商城实例教程
- HA集群之三:corosync+pacemaker实现httpd服务的高可用
- Android JNI使用方法
- Android动画定义知识小结
- HTTPS中间人攻击实践(原理·实践)
- Linux-2.6.32 NUMA架构之内存和调度
- SQL数据库的查询操作大全(select)
- 虚幻4引擎开发的手游_怎么使用虚幻4开发游戏?
- CentOS安装VMwareTools
- Ext applyTo和renderTo的区别和用法
- 如何批量重命名,文件批量重命名方法介绍
- 工厂模式与抽象工厂模式
- 系统检测,是否引证:否
- 我靠!Semaphore里面居然有这么一个大坑!
- 如何同步公众号内容到头条自媒体?
- 多linux系统的安装方法,在Linux系统中安装使用WPS的方法