在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
-
TabBar.Item 的 title 属性现在支持渲染函数动态生成内容了
-
FloatingBubble 增加了 --background CSS 变量
-
ActionSheet 增加了 popupClassName 和 popupStyle 属性 #4910
一、Ant Design Mobile介绍
Ant Design Mobile( 官网地址:https://mobile.ant.design/zh ) 是由支付宝设计团队基于蚂蚁集团的众多业务实践,亿万用户的验证反馈,抽象构建出的移动端资产库。希望可以帮助设计师们脑海中的 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
浏览器中显示如下图所示:
打开浏览器调试器,打开浏览器的移动端调试工具,显示如下图所示:
在线体验地址:
https://codesandbox.io/s/antd-mobile-snrxr?file=/src/App.tsx
其它组件的使用可以继续参考 Ant Design Mobile中的说明进行使用。
四、结束语
以上是关于Ant Design Mobile5.6.0的版本更新说明和使用。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
IT前端和后端要做什么?哪个辛苦加班多?
IT前端和后端要做什么?前端开发和后端开发是软件开发的重要组成部分。前端开发主要做的是用户所能看到的前端展示界面;后端开发主要做的是逻辑功能等模块。要问哪个辛苦加班多?其实都差不多,毕竟技术研发行业都不会太轻松。
19699
2019-08-28 10:31:21
前端与移动开发培训班师资力量怎么样?
前端与移动开发培训班师资力量怎么样?不得不说,博学谷的前端与移动开发培训班的老师,分为教学、教辅和就业三大团队,它们负责为每个学员提供全方面的教学服务。教学团队更是整个师资力量的核心,这些高级讲师都是在这个行业有着多年的实战开发经验,不仅专业能力极强,同时具有丰富的教学经验。下面是对博学谷前端与移动开发培训班师资力量的详细介绍。
4309
2019-12-16 15:49:14
前端开发CSS清除浮动的方法有哪些?
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动溢出,为了方式这个现象的发生,就需要对CSS样式进行处理,而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢?
4945
2019-10-30 18:55:42
Web前端在线学习实战教程介绍
从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都属于前端工程师的专业领域。因此掌握Web前端开发技能,在这个大前端时代你将拥有更多的就业选择。为了帮助更多还在前端学习路上的小伙伴,本文将向大家介绍有些Web前端在线学习实战教程,希望大家能够通过实战巩固理论知识,掌握真正的开发技能!
4377
2020-06-01 10:27:35
Web前端工程师待遇工资怎么样?
网上有数据统计Web前端开发工程师职位月平均收入为1.5万,工作经验3年以上的Web前端工程师达到3万左右。国外前端开发人员和后端开发人员比例约为1:1,但国内比例却在1:3以下,Web前端开发职位的人才缺口巨大。
3855
2021-04-09 10:13:03
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息