Essential UI blocks for building mobile web apps.

Last update: Jan 2, 2023

Overview

Ant Design Mobile

Essential UI blocks for building mobile web apps.

English Doc · 中文文档 · Discord · 钉钉

$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
# or
$ pnpm add antd-mobile

Fast: It is carefully optimized for harsh scenes, without configuration, you can have the best package size and ultimate performance.
Customizable: Based on CSS variables, you can reliably and efficiently adjust the appearance of components or create your own themes.
Atomic: The function of each component, neither more nor less, is exactly what you need.
Fluent: With smooth gestures and delicate animation, it helps the product create the ultimate experience.

You can also play with antd-mobile just in browser with Codesandbox. No need to prepare development environment.

If you found bugs or would like to request some new features, please consider opening an issue.

If you have some question about how to use ant-mobile, you can start a discussion thread.

Thanks to all the contributors of antd-mobile:

Comments

antd-mobile v3 建设
3.0.0-alpha.8 2020-11-19 https://next.mobile.ant.design

经过一段时间的前期工作， antd-mobile v3 正式启动，主要在以下方面

视觉规范

遵循最新的 alipay-design 视觉规范 https://design.alipay.com，对各个组件的使用以及实现彻底的更新，当然，由于视觉变更很大，因此 v3 版本基本上都是破坏性的升级
新版设计稿见 sketch 插件 https://dapollo.alipay.com

代码升级

新版本全部采用 Function-base 组件写法，也就是 react-hooks ，这样从根本上解决 react 新版本关于 Class-base 组件的生命周期提示

新的交互 Touchable

在 v2 版本中，基础交互事件是 onClick ，我们推荐引入 fastclick 来解决古老设备上点击延时的体验问题。本来这没什么问题来着，但是我们的一些依赖组件中使用了 touch 为基础的事件交互，导致出现过非常多的点击穿透 issue 。同时由于 fastclick 也是很长时间没有维护，考虑到我们本身定位移动设计，因此全面切换到 touch 事件交互，这个实现是从 react-native-web 的 Pressable 修改而来。

样式上的收敛

删除所有的 props.style，考虑 style 修改样式的能力有限（深层次的样式无能为力）。但是尽可放心的是你仍然可以快捷的修改样式，通过外挂 className
同时抽取全局变量与组件级别变量，同时配合变量自定义的平台，可以实现快速定制皮肤的需求

按需加载

经常使用 antd 相关的同学应该都知道一个插件 babel-plugin-import，虽然它很优秀，但是还是有一些理解成本的。现在我们把这个理解成本降到了 0 ，因为我们不再需要它了。
我们的包遵从 webpack 的 tree-shaking 规范，因此，你只需要按最简单的使用方式，即可自动做到按需加载比如以下使用只会把 Button 相关的代码打包

import { Button } from 'antd-mobile' <Button></Button>

当然，前提是你的构建工具得开启 tree-shaking。值得高兴的是，现代构建工具基本上都可以轻松支持

更新的 Icon , 更丰富的 Icon

类似 antd v4 的设计，支持图标的按需加载，同时支持自定义的 iconfont

import { Right } from 'antd-mobile-icons' <Right size="md" /> // 或者 import { Icon } from 'antd-mobile' const MyIcon = Icon.createFromIconfontCN( '//at.alicdn.com/t/font_1511412_ksruzvafwng.js', ) export default () => <MyIcon type="close-fill" color="red" />

多语言设计

组件的文字信息支持中英文显示(默认中文)，实现依赖于 Context，仅需要在应用最外层包裹一次即可全局生效

import { LocaleProvider } from 'antd-mobile' import { en_US, zh_CN } from 'antd-mobile-languages' const [lang, setLang] = React.useState(zh_CN) <LocaleProvider value={lang}>  </LocaleProvider>

暗黑模式

目前 dark-mode 已经成为了每个 app 的标配，作为基础 ui 组件，自然是需要支持的

数据统计

轻量级的数据统计，由各组件挂载组件使用统计的钩子，但是官方不提供钩子的具体实现，由使用者自行实现上报方法
之所以做数据统计，是为了大家对自己的页面有更好的监控手段，能及时发现组件的问题。当然也能反映出组件的使用热度

官方绝对不会默认内置任何上报方法

官网设计

采用 dumi方案，但是需要做好 iframe 预览以及二维码预览的方案
有条件的话可以实现组件实时构建与预览

组件迁移

v2 版本中有不少优秀的组件在新版设计稿中没有体现，我们需要逐步地把这些组件迁移过来

基本上就是这些了，我们将在不久的将来新建 next 分支，并往上开始添加代码，希望新版本的实现能带给大家带来更好的体验
以上任何问题可以直接在下边留言
opened by doxiaodong 168
通过cdn引入读取window['antd-mobile']为空对象

Version of antd-mobile

5.21.0

Operating system and its version

Others

Browser and its version

chrome最新版

Sandbox to reproduce

No response

What happened?

通过引入，读取window['antd-mobile']为空对象，期望可以正确读取window['antd-mobile']

Relevant log output

No response
bug help wanted

opened by DaJianWu 39
联动组件 Picker 报错

Version

1.6.0

Environment

windows chorme "react": "^15.3.1",

Reproduction link

https://mobile.ant.design/components/picker-cn/

Steps to reproduce

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Cascader. in Cascader (created by Unknown) in div (created by Unknown) in div (created by Dialog) in div (created by Dialog) in div (created by LazyRenderBox) in LazyRenderBox (created by Dialog) in AnimateChild (created by Animate) in Animate (created by Dialog) in div (created by Dialog) in div (created by Dialog) in Dialog printWarning @ warning.js:35 warning @ warning.js:59 createElement @ ReactElementValidator.js:192 (anonymous) @ Cascader.js:131 (anonymous) @ Cascader.js:130 getCols @ Cascader.js:127 render @ Cascader.js:147 (anonymous) @ ReactCompositeComponent.js:795 measureLifeCyclePerf @ ReactCompositeComponent.js:75 _renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794 _renderValidatedComponent @ ReactCompositeComponent.js:821 performInitialMount @ ReactCompositeComponent.js:361 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountComponentIntoNode @ ReactMount.js:104 perform @ Transaction.js:143 batchedMountComponentIntoNode @ ReactMount.js:126 batchedUpdates @ ReactDefaultBatchingStrategy.js:60 batchedUpdates @ ReactUpdates.js:97 _renderNewRootComponent @ ReactMount.js:319 _renderSubtreeIntoContainer @ ReactMount.js:401 renderSubtreeIntoContainer @ ReactMount.js:342 _renderComponent @ getContainerRenderMixin.js:49 componentDidMount @ getContainerRenderMixin.js:61 chainedFunction @ factory.js:617 (anonymous) @ ReactCompositeComponent.js:264 measureLifeCyclePerf @ ReactCompositeComponent.js:75 (anonymous) @ ReactCompositeComponent.js:263 notifyAll @ CallbackQueue.js:76 close @ ReactReconcileTransaction.js:80 closeAll @ Transaction.js:209 perform @ Transaction.js:156 perform @ Transaction.js:143 perform @ ReactUpdates.js:89 flushBatchedUpdates @ ReactUpdates.js:172 closeAll @ Transaction.js:209 perform @ Transaction.js:156 batchedUpdates @ ReactDefaultBatchingStrategy.js:62 batchedUpdates @ ReactUpdates.js:97 dispatchEvent @ ReactEventListener.js:147 warning.js:35 Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using
. See https://fb.me/react-warning-keys for more information. in div in Unknown (created by Unknown) in div (created by Unknown) in div (created by Unknown) in Unknown (created by Cascader) in Cascader (created by Unknown) in div (created by Unknown) in div (created by Dialog) in div (created by Dialog) in div (created by LazyRenderBox) in LazyRenderBox (created by Dialog) in AnimateChild (created by Animate) in Animate (created by Dialog) in div (created by Dialog) in div (created by Dialog) in Dialog

What is expected?

能用

What is actually happening?

不能用

https://mobile.ant.design/components/picker-cn/ 实现官方demo 报错

opened by zzh3319 39
实现 menu 组件多选功能
First of all, thank you for your contribution! :-)

close #1550

Please makes sure that these checkboxes are checked before submitting your PR, thank you!

[ ] Make sure that you follow antd's code convention.

[ ] Run npm run lint and fix those errors before submitting in order to keep consistent code style.

[ ] Rebase before creating a PR to keep commit history clear.

[ ] Add some descriptions and refer relative issues for you PR.

Extra checklist:

if isBugFix :

[ ] Make sure that you add at least one unit test for the bug which you had fixed.

elif isNewFeature :

[ ] Update API docs for the component.

[ ] Update/Add demo to demonstrate new feature.

[ ] Update TypeScript definition for the component.

[ ] Add unit tests for the feature.

This change is
opened by DavidSuns 37
feat: support remixjs
close: #4930

方案: 利用package.json的 exports(nodejs, webpack)属性, 自定义对其加载时导入包的入口文件。

在gulpfile中新增 buildBundle，用来打包bundle形式的 esm 和 cjs 文件，这里使用的是vite内置的lib build(内置了一套rollup预设)，rollup做bundle好处就是，打出来的包不含样式(样式单独出来了)，也支持umd bunde输出，之前的umdWebpack产出没有分离style，就没有动umdWebpack，否则就是 breaking change。

在实现 buildBundle 过程中，popover 内部抛出了错误，和 #4947 遇到的问题应该有关联

此次提交改动 ant-design-mobile/src/components/popover/popover.tsx 只是为了跑通build，没有实际修复

改动后的产出如下：

两个问题:

bundle目录命名是否需要调整

是否要支持2x(umdWebpack没有做支持，我也就没写了)

最后，在remix中运行：

// app/root.tsx import styles from 'antd-mobile/bundle/style.css'; // 也可以单独去做按需加载方案参考remix社区 export function links() { return [{ rel: "stylesheet", href: styles }]; }

// app/routes/index.tsx import { Button } from 'antd-mobile'; export default function Index() { return ( <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}> <Button color="success">Welcome to Remix</Button> </div> ); }
opened by 3lang3 35

webpack2 ant-design-mobile error

本地环境

antd-mobile 版本： "antd-mobile": "^0.9.8",
操作系统及其版本： windows10 node: 7.0.0
浏览器及其版本： chrome55

你做了什么？

import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

import React, {Component} from 'react'

class AntNavBar extends Component {
  render () {
    return (
    <div>
      <Button>Start</Button>
    </div>
    )
  }
}

export default AntNavBar

.babelrc

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": [["import", { "libraryName": "antd-mobile", "style": "css" }],"transform-runtime", "transform-decorators-legacy", "transform-class-properties"],
  "comments": false
}

你期待的结果是：

像官网一样正常显示

实际上的结果：

ERROR in ./~/.0.9.8@antd-mobile/lib/button/index.js
Module not found: Error: Can't resolve 'react-native' in 'D:\test\js\1112\react-redux-antd-mobile\node_modules\.0.9.8@antd-mobile\lib\button'

opened by fengyun2 34

feat: support react18
新增 render 方法，支持 legacy 和 concurrent 模式，移植自 rc-util

更新 react、react-dom 版本

更新 testing-library 版本

修复 failed test

发了个 npm 包用来测试 antd-mobile-with-react18
opened by miracles1919 33
在 vite 中无法按需加载样式文件

Version of antd-mobile

latest

Operating system and its version

Others

Browser and its version

No response

Sandbox to reproduce

https://github.com/liuweiGL/vite-plugin-demand-import

What happened?

在组件中自动导入样式跟依赖 esm 规范的 tree shaking 冲突，导致样式无法按需加载：我遇到的问题

Relevant log output

No response
bug help wanted

opened by liuweiGL 33
Discussion about main field of antd-mobile
https://github.com/ant-design/ant-design-mobile/issues/66 https://github.com/ant-design/ant-design-mobile/issues/523

社区遇到巨量 import { Xxx } from 'antd-mobile' 找不到模块（找不到 antd-mobile 或 react-native）的问题，根本原因是由于 antd-mobile 同时用于 web 和 native 两种使用场景，以不同的后缀 *.web.js 和 *.js 作为区分，所以项目没有设置统一的入口文件，需要直接引用模块文件。

没有 main 文件也会导致 eslint 报 import/no-unresolved 规则的错误。

目前主要解决方案如下：

找不到 antd-mobile：接入 babel-plugin-import，解决没有 main 入口文件的问题。

或者不再推荐 import { Button } from 'antd-mobile'; 的写法，直接 import Button from 'antd-mobile/lib/button';

找不到 react-native：增加 [resolve.extention] 配置(https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L78)，解决 web 和 native 模块路由的问题。

上面两个方案比较影响易用性，很多用户搞不定这个。

建议：

antd-mobile antd-mobile-native 分开，npm run pub 时同时发布两个包，这样两个包可以各自指定 main 入口，而且不再需要配置 resolve.extention。

相关讨论：https://github.com/ant-design/ant-design-mobile/commit/f561b6eb4f577eea502065df93166a88d443e4d9#commitcomment-20043061
opened by afc163 32
Testing
#900

原来的 npm test 改成了只用来跑测试；

新增 npm run test:web 跑 web 组件测试，npm run test:rn 跑 rn 组件测试；

web 组件的测试用 .web.js 后缀；

测试写法可以参考 button 更多可以参考 antd 的测试。

snapshot 的简单用法：

http://facebook.github.io/jest/docs/tutorial-react-native.html#snapshot-test

如果 snapshot 有变更，可以 npm run test:[web/rn] -- -u 来自动更新 snapshot；

新增 demo 不要忘记跑一次测试把 snapshot 也提交上来；

碰到的问题/注意的点:

native 组件只能用 react-test-renderer 来做 snapshot 的测试，而 web 的组件是用 enzyme 的 render + enzyme-to-json 做的；

native 组件只能用 enzyme 的 shallow，不能用 mount 和 render；
opened by yesmeck 29
ListView onEndReached不停调用

本地环境

antd-mobile 版本：├─┬ [email protected] 操作系统及其版本：Ubuntu 16.04 浏览器及其版本：Chrome Versión 52.0.2743.116 (64-bit)

你做了什么？

引入 antd-mobile 的 ListView, 并上拉

你期待的结果是： ListView onEndReached使用正常

实际上的结果： onEndReached不停调用，无法停止

可重现的在线演示 no

opened by leonardgithub 29
日历组件，2023年一月，第一行全部显示的是上一个月的日期

Version of antd-mobile

5.27

Operating system and its version

iOS, Android

Browser and its version

都有

Sandbox to reproduce

No response

What happened?

第一行如果一行都是上一月的话，是不是需要换一个策略，第一行不是全部显示上一个月的参考vant

Relevant log output

No response
bug

opened by wanglihuaya 2
datePicker周维度时，选择2022年任一周，会选择上2021年的值

Version of antd-mobile

v5.18.0

Operating system and its version

iOS

Browser and its version

safari

Sandbox to reproduce

datePicker周维度时，选择2022年任一周，会选择上2021年的值，如第52周

What happened?

datePicker周维度时，选择2022年任一周，如第52周：会选择2021年的值，应为2022年的值。

Relevant log output

No response
bug need reproduce

opened by 544211707 1
vertical swiper 套用 horizontal swiper 的样式问题

Version of antd-mobile

5.27.0

Operating system and its version

Android

Browser and its version

Chrome

Sandbox to reproduce

https://codesandbox.io/s/floral-hill-c6xgu0

What happened?

vertical 使用了后代选择器, 导致嵌套的 horizontal 的样式被覆盖

Relevant log output

No response
bug

opened by Chinvaejay 0
打包后组件的样式全变了
Version of antd-mobile

5.27

Operating system and its version

iOS

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

本地上yarn start 跑起来的样式是正常的

yarn build 之后放到远端全部样式都变了

例如这个stepper的样式

正常应该是这个样子的

Relevant log output

No response
need reproduce
opened by TripleniuTech 3
Uploading images show chinese text in ImageUploader

Version of antd-mobile

5 alpha

Operating system and its version

Android

Browser and its version

Chrome latest

Sandbox to reproduce

https://franz101.github.io/pet-ai

What happened?

When you upload an image, it will show a loading text, which has not been translated yet. Happy to open a PR.

Relevant log output

No response
bug

opened by franz101 1

Releases(v5.27.0)

v5.27.0(Dec 12, 2022)
Features

Stepper: Support stringMode for high precision decimals. (#5855)

DatePicker: Support tillNow which will return Date will tillNow mark. (#5876)

Bug Fixes

ImageUploader: Fix upload count limit fail upload with latest one. (#5866)

特性

Stepper: 添加 stringMode 以支持高精度模式。(#5855)

DatePicker: 支持 tillNow 配置，当选中至今选项时返回对象会被标记 tillNow。(#5876)

修复

ImageUploader: 修复限制数量上传时，上传最后一个不生效的问题。(#5866)

Source code(tar.gz)
Source code(zip)
v5.26.0(Nov 25, 2022)
Features

Mask: color support customize color. (#5789)

ImageUploader: support columns prop to customize display count in one line. (#5728)

WaterMark: content support multiple lines. (#5800)

FloatingBubble: Add offset and onOffsetChange props to support customize drag position. (#5718)

ImageUploader: Add deleteIcon for customization. (#5807)

Stepper: Add formatter and parser for customization. (#5828)

NoticeBar: Add wrap prop which will show multiple line instead of rolling. (#5810)

Enhancements

Form: FormInstance export setFieldValue api type def. (#5806)

Calendar: Add additional className on the begin and end selected row to make customize style easier. (#5792)

Bug Fixes

ImageUpload: Fix file list incorrect when remove file out of order. (#5815)

特性

Mask: color 支持自定义颜色。(#5789)

ImageUploader: 添加 columns 属性以支持自定义单行可展示的图片个数。(#5728)

WaterMark: content 支持多行文字。(#5800)

FloatingBubble: 添加 offset 与 onOffsetChange 属性以支持自定义拖拽位置。(#5718)

ImageUploader: 添加 deleteIcon 属性以支持自定义删除图标。(#5807)

Stepper: 添加 formatter 与 parser 属性以支持自定义格式化展示与解析。(#5828)

NoticeBar: 添加 wrap 属性允许超长内容直接多行展示。(#5810)

优化

Form: FormInstance 导出 setFieldValue api 类型定义。(#5806)

Calendar: 在选择范围起始和结束行添加额外 className 以便于自定义样式拓展。(#5792)

修复

ImageUpload: 修复乱序删除文件时，文件列表不正确的问题。(#5815)

Source code(tar.gz)
Source code(zip)
v5.25.1(Nov 2, 2022)
Bug Fixes

Fix bundle file missing css-vars-patch.css. (#5781)

修复

修复打包文件丢失 css-vars-patch.css 的问题。(#5781)

Source code(tar.gz)
Source code(zip)
v5.25.0(Nov 1, 2022)
Features

ImageView: maxZoom support auto to auto set max scale as screen size. (#5709)

CascaderView: placeholder support function type customize by level. (#5689)

Enhancements

Export all component props types. (#5768)

Bug Fixes

Slider: Fix style file missing when in prod env. (#5759)

ImageUploader: showFailed=false should auto remove failed task. (#5766)

特性

ImageView: maxZoom 支持 auto 使缩放自动适配最大屏幕尺寸。(#5709)

CascaderView: placeholder 支持自定义函数以配置不同层级的展示内容。(#5689)

优化

导出所有组件的属性定义。(#5768)

修复

Slider: 修复生产环境下样式丢失警告的问题。(#5759)

ImageUploader: 修复 showFailed=false 时不会自动移除失败任务的问题。(#5766)

Source code(tar.gz)
Source code(zip)
v5.24.2(Oct 20, 2022)
Bug Fixes

4b975c3 Picker: Fix position offset in a11y (#5746)

3c0e25a Slider: Fix can't slide to the max (#5751)

修复

4b975c3 Picker: 修复了无障碍模式下布局偏移的问题 (#5746)

3c0e25a Slider: 修复了无法滑动到最大值的问题 (#5751)

Source code(tar.gz)
Source code(zip)
v5.24.1(Oct 17, 2022)
Features

Support ja-JP localization. (#5707)

Enhancements

PasscodeInput: Adjust password dot style to make it more round in HuaWei phone. (#5737)

NavBar: back definition support ReactNode. (#5715)

Use webpack building umd to compatible with the browser not support globalThis. (#5735)

Bug Fixes

Popup: Fix IOS 12 some time can scroll the screen even when Popup is show. (#5738)

Picker: Fix IOS 10 view panel height too narrow. (#5734)

Ellipsis: Fix break when content is undefined. (#5727)

NumberKeyboard: Fix customize background not affect close button. (#5685)

Slider: Fix value not correct when step is decimal. (#5706)

Fix CSS compile use rgba instead of #RGBA to compatible with old version browser. (#5739)

特性

添加 ja-JP 国际化支持。(#5707)

优化

PasscodeInput: 调整华为手机下密码圆点使其变得更圆。(#5737)

NavBar: back 定义支持 ReactNode。(#5715)

使用 webpack 构建 umd 包以兼容浏览器不支持 globalThis 的问题。(#5735)

修复

Popup: 修复 IOS 12 在 Popup 弹出时某些场景仍然可以滚动屏幕的问题。(#5738)

Picker: 修复 IOS 10 下弹层展示内容高度过小的问题。(#5734)

Ellipsis: 修复 content 为 undefined 会报错的问题。(#5727)

NumberKeyboard: 修复自定义背景色对关闭按钮无效的问题。(#5685)

Slider: 修复 step 为小数时，数值不正确的问题。(#5706)

修复 CSS 编译使用 rgba 而非 #RGBA 以兼容旧版浏览器。(#5739)

Source code(tar.gz)
Source code(zip)
v5.24.0(Sep 21, 2022)
Features

12dbee8d7 Calendar: Support minPage and maxPage prop (#5650)

66b17256a Form: Add CSS variable --prefix-width of Form.Item label width (#5665)

Enhancements

5772d6429 Stepper: Default input use decimal mode (#5676)

0b96c9d9e Swiper: Support nested Swiper (#5669)

Bug Fixes

ef9ae66d4 Popover: Should auto close when user move screen (#5677)

1c04f0375 Ellipsis: Use runes to prevent emoji being split unexpectedly (#5678)

特性

12dbee8d7 Calendar: 支持 minPage 与 maxPage 属性 (#5650)

66b17256a Form: 添加 CSS 变量 --prefix-width 以控制 Form.Item 标签宽度 (#5665)

优化

5772d6429 Stepper: 默认输入框使用 decimal 模式 (#5676)

0b96c9d9e Swiper: 支持嵌套用法 (#5669)

修复

ef9ae66d4 Popover: 当用户移动屏幕时自动关闭弹层 (#5677)

1c04f0375 Ellipsis: 修复 emoji 测量不正确的问题 (#5678)

Source code(tar.gz)
Source code(zip)
v5.23.0(Sep 15, 2022)
Features

f288a055c ImageUploader: Add onUploadQueueChange prop (#5640)

d42a0e1f3 ImageUploader: Add itemRender prop (#5642)

fad7568fa Slider: Add residentPopover prop (#5662)

6aede4217 Footer: Add footer component (#5611)

Enhancements

5dbbab3dd Slider: Update disabled style (#5589)

654732677 ImageUploader: Optimize image preview memory (#5627)

7675065d1 ImageViewer: Use index as the key (#5641)

eba207369 Rate: Optimise the style in half-selected mode (#5601)

22fa4e1f8 Dialog: Action text support ReactNode (#5584)

923a35929 PageIndicator: Adjust dot color in white mode (#5607)

4085126a7 Toast: Adjust some styles (#5595)

Bug Fixes

92d6290f7 fix(Picker): Fix getPropertyValue compatibility issue on iOS 10

e151e070c fix(Avatar): Adjust Image import path to prevent issue in HD mode (#5664)

3a9d3f4a9 fix(Slider): Fix crash when range and value don't match (#5591)

特性

f288a055c ImageUploader: 增加了 onUploadQueueChange 属性 (#5640)

d42a0e1f3 ImageUploader: 增加了 itemRender 属性 (#5642)

fad7568fa Slider: 增加了 residentPopover 属性 (#5662)

6aede4217 Footer: 增加了新组件 Footer (#5611)

优化

5dbbab3dd Slider: 优化了禁用状态下的样式 (#5589)

654732677 ImageUploader: 优化了内存占用 (#5627)

7675065d1 ImageViewer: 避免图片 url 相同时出现 key 重复 (#5641)

eba207369 Rate: 优化了半选模式下的样式 (#5601)

22fa4e1f8 Dialog: Action 的 text 属性支持了 ReactNode 类型 (#5584)

923a35929 PageIndicator: 调整了 white 模式下的指示器颜色 (#5607)

4085126a7 Toast: 优化了一些样式 (#5595)

修复

92d6290f7 fix(Picker): 修复了 getPropertyValue 在 iOS 10 上的兼容性问题

e151e070c fix(Avatar): 修复了在高清模式下可能出现样式错乱的问题 (#5664)

3a9d3f4a9 fix(Slider): 修复了 range 和 value 不匹配时组件渲染出错的问题 (#5591)

Source code(tar.gz)
Source code(zip)
v5.22.0(Aug 18, 2022)
New Features

4ff80b4f4 ActionSheet: Add new property bold to type Action and adjust some styles (#5582)

b118e4ce7 Add dev and prod bundle (#5576)

4066eb73b Selector: Add gap related CSS variables (#5554)

Enhancements

630e0ddbe CheckList: Change icon size (#5566)

056746a4f TabBar: Adjust text color and font size (#5562)

e94b4d4ac IndexBar: Adjust bubble distance (#5561)

e40827de2 PageIndicator: Adjust default --dot-color (#5556)

Bug Fixes

eeaf90054 The new umd bundle should load antdMobile variable onto window

3b6d3ecca Ellipsis: Fix error when using with display flex (#5568)

222ff2bc7 ImageViewer: Should reset the transform when viewer is reshowed (#5569)

ca85f764e FloatingPanel: Fix rendering gaps caused by decimal point (#5551)

特性

4ff80b4f4 ActionSheet: Action 支持了新属性 bold，同时微调了一些样式 (#5582)

b118e4ce7 各种预购建产物都支持了 dev 和 prod 两种版本 (#5576)

4066eb73b Selector: 增加了一些 gap 相关的 CSS 变量 (#5554)

优化

630e0ddbe CheckList: 微调了图标大小 (#5566)

056746a4f TabBar: 微调了文字颜色和图标大小 (#5562)

e94b4d4ac IndexBar: 气泡现在距离屏幕右边缘更远一些了，避免手指遮挡 (#5561)

e40827de2 PageIndicator: 调整了默认的 --dot-color (#5556)

修复

eeaf90054 预购建产物中的 umd 版本之前没有正确的挂载到 window 上，现在正常了

3b6d3ecca Ellipsis: 修复了当被放置在 flex 容器中时可能显示异常的问题 (#5568)

222ff2bc7 ImageViewer: 当关闭后重新打开时，现在会自动重置缩放比例到初始状态了 (#5569)

ca85f764e FloatingPanel: 修复了部分情况下由于浏览器渲染精度问题导致出现缝隙的问题 (#5551)

Source code(tar.gz)
Source code(zip)
v5.21.0(Aug 9, 2022)
New Features

d08c419cf Add ResultPage component (#5494)

dfa63e68e Form: FormItemProps complements more RcFieldProps (#5527)

Enhancements

3e51017dc Upgrade ahooks to 3.7.0 (#5541)

3a18ce174 Upgrade @floating-ui/dom to 1.0.0

Bug Fixes

43a359e24 Rate: Rate value will reset when drag stop on PC (#5524)

f7413d45d Swiper: Add swiper count dependency when autoplay (#5521)

cd150e3b4 Picker: wheel is not updated when renderLabel or mouseWheel is updated (#5520)

特性

d08c419cf 新增了 ResultPage 组件 (#5494)

dfa63e68e Form: FormItemProps 现在开放了更多的 RcFieldProps 上的属性 (#5527)

优化

3e51017dc 升级 ahooks 到 3.7.0 (#5541)

3a18ce174 升级 @floating-ui/dom 到 1.0.0

修复

43a359e24 Rate: 修复了在桌面端浏览器上对 Rate 进行拖动时行为异常的问题 (#5524)

f7413d45d Swiper: 当 Swiper 内容数量发生变化时，现在会触发 autoplay 逻辑的重新计算了 (#5521)

cd150e3b4 Picker: 修复了部分情况下，选项没有触发重新渲染的问题 (#5520)

Source code(tar.gz)
Source code(zip)
v5.20.0(Jul 28, 2022)
New Features

560c291f6 5a696c50b Rate: Support slide gesture (#5497) (#5505)

6b0c10747 SwipeAction: Add onActionsReveal prop (#5484)

ea217960e Form: Add new requiredMarkStyle option none (#5486)

Enhancements

68f36926a Upgrade @use-gesture/react to 10.2.17

0d94c630c Update id-ID locale (#5485)

Bug Fixes

f58011004 830b96b9b SwipeAction: Fix position blink sometimes (like #5490) (#5514)

be9011675 Swiper: Fix a dragging gesture bug when imperatively call jumpTo in the onClick event of Swiper.Item

88b0fea9a useResizeEffect: Avoid ResizeObserver loop limit exceeded error (#5491)

特性

560c291f6 5a696c50b Rate: 支持了滑动手势 (#5497) (#5505)

6b0c10747 SwipeAction: 新增了 onActionsReveal 属性 (#5484)

ea217960e Form: requiredMarkStyle 属性新增了可选项 none，用于完全不显示必填标记 (#5486)

优化

68f36926a 升级 @use-gesture/react 到 10.2.17

0d94c630c 更新了 id-ID 翻译 (#5485)

修复

f58011004 830b96b9b SwipeAction: 修复了在某些情况下可能位置出现闪烁偏移的问题 (参见 #5490) (#5514)

be9011675 Swiper: 修复了当手动在 Swiper.Item 的 onClick 事件中调用 jumpTo 方法时，可能会导致手势异常的问题

88b0fea9a useResizeEffect: 避免出现 ResizeObserver loop limit exceeded 报错 (#5491)

Source code(tar.gz)
Source code(zip)
v5.19.0(Jul 19, 2022)
New Features

a102c4bce Add .umd.js and .compatible.umd.js bundles

34502caa2 Cascader & CascaderView: Add activeIcon prop (#5462)

82a35de92 Modal & Dialog & ActionSheet: Omit destroyOnClose and forceRender types in imperatively show mode (#5475)

d21b9ef39 NumberKeyboard: Support multiple customKeys (#5458)

Enhancements

710f30198 PasscodeInput: Export type PasscodeInputRef

0569fa9b9 PasscodeInput: Use aria labels to imporve a11y and adjust classname (#5476)

eccdcb32e NumberKeyboard: Adjust className with prefix (#5454) ⚠️

2ad7b7548 Result: Add default value for status prop (#5480)

01d27e0e2 SearchBar: Use aria labels to imporve a11y (#5465)

b175374ca Calendar: Replace renderLabel type string to ReactNode (#5450)

Bug Fixes

ebd9a91d4 SearchBar: Prevent getting duplicated value on enter press with some IMEs (#5466)

bc56b48df ImageViewer: Scale origin is inaccurate when pinching (#5461)

533892063 Button: Fix React's bug when the browser translation function is enabled (#5460)

特性

a102c4bce 增加了 .umd.js 和 .compatible.umd.js 的预构建产物

34502caa2 Cascader & CascaderView: 增加了 activeIcon 属性 (#5462)

82a35de92 Modal & Dialog & ActionSheet: 在指令式的 show 方法的 ts 类型定义中，去除了 destroyOnClose 和 forceRender 属性 (#5475)

d21b9ef39 NumberKeyboard: 支持配置两个自定义按键 (#5458)

优化

710f30198 PasscodeInput: export 了 PasscodeInputRef 类型

0569fa9b9 PasscodeInput: 优化了可访问性，并且调整了一些 CSS 类名 (#5476) ⚠️

eccdcb32e NumberKeyboard: 调整了一些 CSS 类名 (#5454) ⚠️

2ad7b7548 Result: 为 status 属性增加了默认值 (#5480)

01d27e0e2 SearchBar: 优化了可访问性 (#5465)

b175374ca Calendar: renderLabel 属性的类型从 string 调整为了 ReactNode (#5450)

修复

ebd9a91d4 SearchBar: 避免在输入法中按下回车键会导致插入重复的值 (#5466)

bc56b48df ImageViewer: 修复了缩放时中心偏移的问题 (#5461)

533892063 Button: 修复了和浏览器翻译功能的兼容性问题 (#5460)

Source code(tar.gz)
Source code(zip)
v5.18.0(Jul 8, 2022)
New Features

7be2bb018 Switch: Deprecate beforeChange prop and onChange supports promise (#5456) ⚠️

Enhancements

ea463ee9b Rate: Use aria labels to imporve a11y (#5449)

d2afb1fef NoticeBar: Adjust the clickable area of close icon (#5448)

4ecbbf2cb A minor refactor to reduce bundle size

c7aeec45a Upgrade rc-field-form to 1.27 and @use-gesture/react to 10.2.16

Bug Fixes

9fec063d9 Tabs: Fix the background color in dark mode

c7a772b1b Form: Form.Item now supports native props (aka style className aria-* data-*)

6393aa94d fee2ff541 Calendar: CalendarRef used to be misspelled as CalenderRef (#5443) ⚠️

特性

7be2bb018 Switch: 弃用了 beforeChange 属性，同时 onChange 属性支持了返回 promise (#5456) ⚠️

优化

ea463ee9b Rate: 增加了一些 aria 标记，优化可访问性 (#5449)

d2afb1fef NoticeBar: 扩大了关闭图标的点击范围 (#5448)

4ecbbf2cb 底层做了一些重构，稍微减少了一些包体积

c7aeec45a rc-field-form 升级到了 1.27，@use-gesture/react 升级到了 10.2.16

修复

9fec063d9 Tabs: 修复了深色模式下的背景色

c7a772b1b Form: Form.Item 支持了 native props（也就是 style className aria-* data-*）

6393aa94d fee2ff541 Calendar: ts 类型 CalenderRef 之前拼写错误了，现在纠正为 CalendarRef 了 (#5443) ⚠️

Source code(tar.gz)
Source code(zip)
v5.17.2(Jul 5, 2022)
Bug Fixes

6abb71e98 FloatingPanel: Fix the background color in dark mode

1146296d7 FloatingPanel: Fix --border-radius applying to the wrong element (#5432)

18443f239 TextArea: Revert 86c70fcf to fix the problem of height not changing when content get deleted (#5427)

fae45549b Picker: In some circumstances wheel may not scroll to the correct position

修复

6abb71e98 FloatingPanel: 修复了深色模式下的背景色

1146296d7 FloatingPanel: 修复了 --border-radius 应用到了错误的元素上的问题 (#5432)

18443f239 TextArea: 回退了 86c70fcf 的改动，以修复当内容变化时 TextArea 高度可能不会降低的问题 (#5427)

fae45549b Picker: 修复了在某些情况下拨轮所滚动的位置异常的问题

Source code(tar.gz)
Source code(zip)
v5.17.1(Jun 30, 2022)
Bug Fixes

Fix the broken npm package of v5.17.0.

修复

5.17.0 发布的 npm 包有误，重新发布

Source code(tar.gz)
Source code(zip)
v5.17.0(Jun 30, 2022)
New Features

fcf05d211 Picker: Add loading & loadingContent props (#5404)

c152cf386 Image: Add onContainerClick prop (#5419)

Enhancements

050e83efa 7cb6691a0 Adjust the style of some components in dark mode (#5395) (#5386)

Bug Fixes

4a81b8375 CapsuleTab & JumboTab: Animation does not work when content height change (#5421)

05b18147c Cascader & CascaderView: Fix onTabsChange not being triggered when jump to next level

6177784bc onChange prop should only be called when the previous and next values are different

1b78356c2 Empty: Fix svg image too high on iOS 11.4

86c70fcf5 TextArea: Fix autoSize may cause blinking in some browsers

特性

fcf05d211 Picker: 增加了 loading 和 loadingContent 属性，用来控制 Picker 的加载状态 (#5404)

c152cf386 Image: 增加了 onContainerClick 属性 (#5419)

优化

050e83efa 7cb6691a0 优化了一些组件在深色模式下的样式 (#5395) (#5386)

修复

4a81b8375 CapsuleTab & JumboTab: 修复了当内容高度变化时，tab 切换的动画效果缺失的问题 (#5421)

05b18147c Cascader & CascaderView: 修复了当自动进入下一级选项时，onTabsChange 事件没有触发的问题

6177784bc 各种组件的 onChange 事件现在只会在前后两次值不一样时才进行触发了

1b78356c2 Empty: 修复了在 iOS 11.4 上 svg 元素高度异常的问题

86c70fcf5 TextArea: 修复了当开启 autoSize 时，输入框可能出现闪烁的问题

Source code(tar.gz)
Source code(zip)
v5.16.1(Jun 23, 2022)
Bug Fixes

829d87381 Popup: The default value of getContainer should be () => document.body instead of null (#5388)

修复

829d87381 Popup: getContainer 属性的默认值应该是 () => document.body 而非 null (#5388)

Source code(tar.gz)
Source code(zip)
v5.16.0(Jun 23, 2022)
New Features

ee41ac07b Cascader: Add a new actions param to children render function (#5375)

3fe936a4b List: Support nativeElement ref (#5369)

7e0748047 ProgressBar: Add text prop and --text-width CSS variable

333d5e873 ProgressBar: Add rounded prop

afec81cf8 Popup: Add disableBodyScroll prop

72ba5393d Popup & CenterPopup: Add closeOnMaskClick onClose showCloseButton props

ef1cbf0d4 Modal: Change Action.text type to ReactNode (#5354)

9d59d4b1a Add id-ID locale (#5357)

0cdd57c11 Add kk-KZ locale (#5355)

Enhancements

429424d88 ProgressBar: Adjust the default track width to 8px

b972f750c Stepper: Use aria propss to improve a11y (#5365)

3576b648c Slider: Use aria props to improve a11y (#5359)

da26fbbe6 Popup: Refactor the implementation and now it will render with ShouldRender (#5338)

Bug Fixes

e0d2c44d5 Picker: Fix some accessibility issues on android (#5370)

35642f16f Steps: Icon background should be black in dark mode (#5371)

特性

ee41ac07b Cascader: children 的 render 函数增加了 actions 参数 (#5375)

3fe936a4b List: 支持了 ref，暴露出了 nativeElement (#5369)

7e0748047 ProgressBar: 增加了 text 属性和 --text-width CSS 变量

333d5e873 ProgressBar: 增加了 rounded 属性

afec81cf8 Popup: 增加了 disableBodyScroll 属性

72ba5393d Popup & CenterPopup: 增加了 closeOnMaskClick onClose showCloseButton 属性

ef1cbf0d4 Modal: 调整了 Action.text 的类型为 ReactNode (#5354)

9d59d4b1a 增加了 id-ID 翻译 (#5357)

0cdd57c11 增加了 kk-KZ 翻译 (#5355)

优化

429424d88 ProgressBar: 调整了默认的轨道宽度为 8px

b972f750c Stepper: 使用 aria 属性优化了组件的无障碍支持 (#5365)

3576b648c Slider: 使用 aria 属性优化了组件的无障碍支持 (#5359)

da26fbbe6 Popup: 重构了底层实现，使用了统一的 ShouldRender (#5338)

修复

e0d2c44d5 Picker: 修复了一些安卓环境下的无障碍问题 (#5370)

35642f16f Steps: 修复了在深色模式下图标的背景颜色不正确的问题 (#5371)

Source code(tar.gz)
Source code(zip)
v5.15.1(Jun 17, 2022)
Enhancements

35ed24778 Dialog: Improve a11y (#5337)

c43bf1a7c Switch: Improve a11y (#5331)

Bug Fixes

f60981960 Radio: onChange should be call once when the selected item is clicked multiple times (#5343)

452ea608c DatePicker & DatePickerView: Fix year filter not working (#5340)

优化

35ed24778 Dialog: 优化了对无障碍的支持 (#5337)

c43bf1a7c Switch: 优化了对无障碍的支持 (#5331)

修复

f60981960 Radio: 当用户多次点击时，现在 onChange 事件只会触发一次了 (#5343)

452ea608c DatePicker & DatePickerView: 修复了 filter 中 year 的配置没有生效的问题 (#5340)

Source code(tar.gz)
Source code(zip)
v5.15.0(Jun 15, 2022)
New Features

05c621563 List: Add max-width limit to extra part for preventing overflow & add --extra-max-width

6b4b6a4df Checkbox: Add ref for Checkbox which supports check uncheck toggle methods

87533ec20 TextArea: Support nativeElement ref (#5307)

2ebede58d Badge: Add wrapperClassName and wrapperStyle props (#5302)

Enhancements

22b03da0a Star: Adjust the star icon

6412725b7 InfiniteScroll: Add throttle logic for scroll position check to have better performance

2262837b0 Icon: Upgrade antd-mobile-icons to 0.3.0 so that the svg elements won't have the nonsense titles

2feb9c48c Toast: Refactor the implementation of Toast.show (#5296)

c3bc2b65a Badge: Change the class name of the wrapper element to adm-badge-wrapper (used to be adm-badge-wrap)

Bug Fixes

7686a157d SafeArea: Fix SafeArea becoming too high in some rem layout projects. Add --multiple and --adm-safe-area-multiple for manually adjusting the height.

12328b2d7 Form: Avoid rendering an empty description node (#5320)

53f36ecac List: Revert #5277 to prevent unexpected line breaks in extra part

434b9805f InfiniteScroll: Prevent dropping into the infinite loop trap for React 18 apps

b841bdece ImageUploader: Fix some images may be skipped when multiple images accomplish upload process at the same time

特性

05c621563 List: extra 部分增加了 max-width 限制，避免文字过长时溢出容器 & 增加了 --extra-max-width 用来自由设置上述的 max-width

6b4b6a4df Checkbox: 增加了 ref，支持 check uncheck toggle 方法

87533ec20 TextArea: ref 中支持了 nativeElement (#5307)

2ebede58d Badge: 增加了 wrapperClassName 和 wrapperStyle 属性 (#5302)

优化

22b03da0a Star: 调整了默认的星形图标

6412725b7 InfiniteScroll: 增加了限流逻辑，避免出现性能影响

2262837b0 Icon: 升级 antd-mobile-icons 到 0.3.0 版本，现在的 svg 元素上不会出现无意义的 title 了

2feb9c48c Toast: 重构了 Toast.show 的实现 (#5296)

c3bc2b65a Badge: 外层容器的 className 从 adm-badge-wrap 调整为了 adm-badge-wrapper

修复

7686a157d SafeArea: 修复了在一些高清模式的项目中，SafeArea 可能高度过高的问题，并且新增了 --multiple 和 --adm-safe-area-multiple CSS 变量用于手动设置放大倍数

12328b2d7 Form: 修复了可能会意外渲染一个 description 节点的问题 (#5320)

53f36ecac List: 回退了 #5277 的改动，避免 extra 部分出现意外的折行

434b9805f InfiniteScroll: 修复了在 React 18 的应用中，InfiniteScroll 在部分失败状态下可能进入死循环的问题

b841bdece ImageUploader: 修复了在 React 18 的应用中，同时上传多张图片可能会导致部分上传任务无法正确的触发完成的问题

Source code(tar.gz)
Source code(zip)
v5.14.3(Jun 10, 2022)
Bug Fixes

773a675bf InfiniteScroll: Fix loadMore can not be triggered after retry from failed state

8a968d4f7 Form: setFieldsValue should trigger the rerender of Form.Subscribe now

修复

773a675bf InfiniteScroll: 修复了当某次加载失败点击重试之后，loadMore 无法再被继续触发的问题

8a968d4f7 Form: 当调用 setFieldsValue 更新表单数据时，Form.Subscribe 现在可以正确的触发重渲染了

Source code(tar.gz)
Source code(zip)
v5.14.2(Jun 9, 2022)
Bug Fixes

a5389b68d css-vars-patch.css in 2x directory should be multiplied

修复

a5389b68d 2x 目录下的 css-vars-patch.css 现在会被正确地乘 2 倍大小了

Source code(tar.gz)
Source code(zip)
v5.14.1(Jun 9, 2022)
Bug Fixes

0f1b2622f Modal & Dialog: Fix className and style props doesn't take effect

Bug Fixes

0f1b2622f Modal & Dialog: 修复 className 和 style 属性没有生效的问题

Source code(tar.gz)
Source code(zip)
v5.14.0(Jun 8, 2022)
New Features

1c9c8145c Add dark mode support (experimental)

8a29b1763 Add css-vars-patch.css for CSS variables auto fallback (#5289)

351dec020 Expose some new global CSS variables for theming

183e7ed6f Add a new component CenterPopup

f6444f4a6 InfiniteScroll: Supports retry when load more failed and children supports render function

c1a496434 CascaderView & Cascader: Add onTabsChange prop (#5266)

bec179dbf Slider: Add popover prop

Enhancement

116118573 Slider: Adjust style

c2e60c03e TabBar: Adjust style with larger icon

4505418bd Dialog & Modal: Reimplement Dialog and Modal with CenterPopup under the hood

Bug Fixes

ed33d5020 Picker: Fix Picker body height over-exceeds in iOS 11.4 Safari (#5287)

3cecd6334 List: Fix extra content can not break lines (#5277)

9f48dec13 Cascader: Fix isLeaf may get wrong value (#5259)

特性

1c9c8145c 增加了暗黑模式（试验性）

8a29b1763 增加了 css-vars-patch.css 支持 CSS 变量的自动降级 (#5289)

351dec020 增加了更多的全局 CSS 变量，用于定制主题

183e7ed6f 增加了新组件 CenterPopup

f6444f4a6 InfiniteScroll: 当请求失败时，支持点击重试，同时 children 支持了 render function

c1a496434 CascaderView & Cascader: 增加了 onTabsChange 属性 (#5266)

bec179dbf Slider: 增加了 popover 属性

优化

116118573 Slider: 调整了外观

c2e60c03e TabBar: 调整了外观，现在的图标更大一些了

4505418bd Dialog & Modal: 基于新的 CenterPopup 组件重构了 Dialog 和 Modal 的底层实现

修复

ed33d5020 Picker: 修复了在 iOS 11.4 下，主内容区域的高度可能超出整体容器的问题 (#5287)

3cecd6334 List: 修复了 extra 内容超长时无法换行的问题 (#5277)

9f48dec13 Cascader: 修复了 isLeaf 值可能不正确的问题 (#5259)

Source code(tar.gz)
Source code(zip)
v5.13.1(Jun 2, 2022)
Bug Fixes

fa84843cc Popover: fix Popover may cause render error in some lower version OSs due to the use of ResizeObserver

修复

fa84843cc Popover: 修复了 Popover 在一些低版本系统（例如 iOS < 13.1）中可能导致页面渲染报错的问题，由于底层调用了 ResizeObserver

Source code(tar.gz)
Source code(zip)
v5.12.7(Jun 2, 2022)
Bug Fixes

fa84843cc Popover: fix Popover may cause render error in some lower version OSs due to the use of ResizeObserver

修复

fa84843cc Popover: 修复了 Popover 在一些低版本系统（例如 iOS < 13.1）中可能导致页面渲染报错的问题，由于底层调用了 ResizeObserver

Source code(tar.gz)
Source code(zip)
v5.13.0(May 31, 2022)
Features

b159354f3 add fr-FR locale (#5216)

5235443d7 IndexBar: add onIndexChange prop (#5223)

9663bc88f Modal & Dialog: add destroyOnClose and forceRender props (#5217)

51ea55989 ImageViewer: add renderFooter prop (#5228)

8eb12cb45 ErrorBlock: add createErrorBlock function for generating more light-weighted or customized ErrorBlock

e813593ea add reduceMotion and restoreMotion

3c0579669 Ellipsis: move Ellipsis out of experimental components, now it is stable

ffeb0843b move HD out of the experimental features, now it is stable

Enhancements

a0e5405e8 Mask: adjust animation config

ffe3ca079 Modal & Dialog: remove the whole DOM element after hidden if destroyOnClose is true

d120a35bf upgrade @use-gesture/react to 10.2.15

b0bd5eee9 improve some error messages about measuring css length

Bug Fixes

09135d283 Input: may can't enter values when click the clear button in ios (#5247)

fc623d614 ImageViewer: remove unused max-height: -webkit-fill-available style to prevent eslint errors

b07d5e64c Ellipsis: middle mode has more characters on right than on left (#5253)

特性

b159354f3 增加了 fr-FR 翻译 (#5216)

5235443d7 IndexBar: 增加了 onIndexChange 属性 (#5223)

9663bc88f Modal & Dialog: 增加了 destroyOnClose 和 forceRender 属性 (#5217)

51ea55989 ImageViewer: 增加了 renderFooter 属性 (#5228)

8eb12cb45 ErrorBlock: 增加了 createErrorBlock 函数，你可以使用它创建更轻量化的或者是定制化的 ErrorBlock

e813593ea 增加了 reduceMotion 和 restoreMotion 函数，你可以使用它们来减弱组件的动画效果

3c0579669 Ellipsis: 将 Ellipsis 移出了试验性范围，现在它是一个常规的稳定组件了

ffeb0843b 将高清方案移除了试验性范围，现在它是一个常规的稳定特性了

优化

a0e5405e8 Mask: 调整了动画效果

ffe3ca079 Modal & Dialog: 当 destroyOnClose 为 true 时，现在会在组件隐藏后移除整个 DOM 节点了，而不仅仅是只移除内容部分的 DOM

d120a35bf 升级 @use-gesture/react 到 10.2.15

b0bd5eee9 优化了一些关于 css 长度计算的报错提示信息

修复

09135d283 Input: 修复了在 iOS 下点击清除按钮时输入框可能卡住的问题 (#5247)

fc623d614 ImageViewer: 移除了无效的 max-height: -webkit-fill-available 样式，避免出现 lint 报错

b07d5e64c Ellipsis: 修复了 middle 模式下，右侧内容可能比左侧内容更多的问题 (#5253)

Source code(tar.gz)
Source code(zip)
v5.12.6(May 23, 2022)
Bug Fixes

f8d66d800 fix: downgrade @use-gesture/react to 10.2.12 due to bugs in 10.2.14

修复

f8d66d800 fix: 把 @use-gesture/react 降到了 10.2.12 版本，由于 10.2.14 版本中存在 bug

Source code(tar.gz)
Source code(zip)
v5.12.5(May 20, 2022)
Features

747fa239d [Calendar] Add shouldDisableDate prop (#5198)

08562ec12 [Image] Add draggable props which defaults to false

Enhancements

e7632d274 [ActionSheet] Refactor the implementation and adjust style

481f0a50b [ActionSheet] Adjust DOM structure and update tests

84923eb83 Upgrade @floating-ui/dom to 0.5

Bug Fixes

94b5b8f99 [Popover] Fix position not correct when target element is position fixed and popover content is very long

e8e2810f0 [Form] Fallback label to empty string in validation messages

88bba8f79 [TextArea] Input Chinese in firefox when maxLength is set (#5209)

特性

747fa239d [Calendar] 增加了 shouldDisableDate 属性 (#5198)

08562ec12 [Image] 增加了 draggable 属性，默认为 false

优化

e7632d274 481f0a50b [ActionSheet] 调整了样式和 DOM 结构，底层不再依赖 Button 组件

84923eb83 升级 @floating-ui/dom 到 0.5

修复

94b5b8f99 [Popover] 修复了当目标元素是 fixed 定位且 Popover 内容很长时，可能出现定位错误的问题

e8e2810f0 [Form] 当 label 为 ReactNode 时，校验信息中的label内容会自动 fallback 为空字符串，避免出现undefined` 文案

88bba8f79 [TextArea] 修复了在 FireFox 中，当 TextArea 设置了 maxLength 时，无法输入中文的问题 (#5209)

Source code(tar.gz)
Source code(zip)
v5.12.4(May 17, 2022)
Features

[Button] supports native onMouseDown onMouseUp onTouchStart onTouchEnd props d94c69249

Enhancements

[Badge] adjust the implementation of Badge.dot to prevent ts errors 81d649135

[Image] update the loading and broken placeholder icon 1aee619f7

[Button] adjust the type of onClick 7b2d5034d

[Toast] update max-width af26f62e2

Bug Fixes

[InfiniteScroll] if the scroll parent changes, InfiniteScroll should move the event handler to the new scroll parent f188a2be4

[SearchBar] onCancel should be able to trigger now #5201 b66911e04 8337f7062

特性

[Button] 支持了原生 button 元素的 onMouseDown onMouseUp onTouchStart onTouchEnd 属性 d94c69249

优化

[Badge] 调整了 Badge.dot 的实现方式，避免出现 ts 报错 81d649135

[Image] 更新了加载和错误时的占位图 1aee619f7

[Button] 调整了 onClick 的类型 7b2d5034d

[Toast] 调整了 max-width af26f62e2

修复

[InfiniteScroll] 当外层滚动元素发生变化时，现在 InfiniteScroll 可以正常切换事件绑定的对象并且触发加载逻辑了 f188a2be4

[SearchBar] 修复了 onCancel 事件无法触发的问题 #5201 b66911e04 8337f7062

Source code(tar.gz)
Source code(zip)