Skip to content
Changelog Hub

antd 5.0.0

npm / antd / 5.0.0 source ↗

🏆 Ant Design 5.0.0 is out!

Read it before migration

🌟 If you want to migrate to Ant Design 5.0, please check V4 to V5.

Major Changes

  • 🔥 New Components
  • 🔥 New Component Variants
    • 🔥 DatePicker add presets to support preset ranges for quick selection. #38249
    • 🔥 Progress circle type support responsive format text for small size. #38231 @li-jia-nan
    • 🔥 Steps add inline type. #38311 @JarvisArt
  • 💄 New Design
    • 💄 Change primary color to #1677ff. #37254
    • 💄 Change basic border radius to 6px, and support gradient radius. #37146 #37369
    • 💄 Optimize transition duration. #37438
    • 💄 Optimize padding and remove border for some components. #37283
      • 💄 Pagination remove border. #37441
      • 💄 Optimize Timeline style. #37465
      • 💄 Optimize Steps style. #37473
    • 💄 Optimize focus style for some components. #37483
    • 💄 Optimize style with large border radius.
      • 💄 Optimize Table hover style. #37370
      • 💄 Optimize Segmented hover style. #37498
      • 💄 Optimize Dropdown hover style. #37491
      • 💄 Optimize close button style for some components like Modal. #37634
      • 💄 Optimize Menu style. #38009
      • 💄 Optimize hover style for some more components. #37433
    • 💄 Optimize Switch transition. #37658
    • 💄 Optimize Anchor ink ball style. #38616
  • 🆕 Export object theme which contains hooks and algorithms related with theme. #36302
    • 🆕 Add theme.useToken hook to get Design Token in context. #36267
    • 🆕 Preset algorithm
      • 🆕 Default algorithm theme.defaultAlgorithm. #36175
      • 🆕 Dark algorithm theme.darkAlgorithm. #36546 #36656
      • 🆕 Compact algorithm theme.compactAlgorithm. #38105
  • 🆕 ConfigProvider support theme prop to modify theme configuration. For more: Customize Theme.
    • 🆕 Support multiple algorithm pipeline. #37082
    • 🆕 Support switching wireframe style. #37507
    • 🆕 Support override Design Token for single component. #37568
  • 🆕 Add locale directory in package, which contains commonjs locale files. #38194 @chunsch
  • 🗑 Do not support IE browser anymore.
  • 🗑 Remove package antd/lib. #36362
    • 🛠 Change main in package.json to dist/antd.js. eb8835f
  • 🗑 Remove dist/antd.css, and add dist/reset.css to override common styles. #36224
  • 🗑 Deprecate visible and provide open instead in components below. @yykoypj
    • 🗑 Tag deprecate visible. #36671
    • 🗑 Table deprecate filterDropdownVisible and provide filterDropdownOpen. #36747
    • 🗑 Drawer deprecate visible and provide open instead. #36750
    • 🗑 Modal deprecate visible and provide open instead. #36774
    • 🗑 Dropdown deprecate visible and provide open instead. #36799
    • 🗑 Tooltip deprecate visible and provide open instead, Popover and Popconfirm. #36807
  • 🗑 Deprecate dropdownClassName and provide popupClassName instead in components below. @heiyu4585
    • 🗑 AutoComplete deprecate dropdownClassName and provide popupClassName instead. #37087
    • 🗑 Mentions deprecate dropdownClassName and provide popupClassName instead. #37122
    • 🗑 Cascader deprecate dropdownClassName and provide popupClassName instead. #37089
    • 🗑 Select deprecate dropdownClassName and provide popupClassName instead. #37091
    • 🗑 TreeSelect deprecate dropdownClassName and provide popupClassName instead. #37092
    • 🗑 DatePicker and TimePicker deprecate dropdownClassName and provide popupClassName instead. #37207
  • 🛠 Refactor styles with CSS-in-JS for all components.
    • 🗑 Remove less and css in package. #36244
  • 🛠 Change date library from Moment.js to Day.js, for more: Use custom date library. b22815d @iamkun
  • 🛠 React Notification to support React 18 concurrent mode and refactor useNotification hook，which is preferred instead of static function. #35423 #35568
  • 🛠 Slider props related with Tooltip are unified into tooltip. #37043 @yykoypj
  • 🛠 Migrate official site to dumi@2. #38328
  • 🏆 Ant Design 5.0.0 已发布！欢迎阅读我们的 发布文档。 升级必读
  • 🌟 如果你想升级到 Ant Design 5.0，请仔细查阅我们的迁移文档。 主要变化
  • 🔥 新增组件
  • 🔥 新增组件变体
    • 🔥 DatePicker 新增 presets 属性用于预设时间范围快捷选择。#38249
    • 🔥 Progress circle 类型支持小尺寸自适应。#38231 @li-jia-nan
    • 🔥 Steps 新增 inline 类型。#38311 @JarvisArt
  • 💄 设计变化
    • 💄 调整主色为 #1677ff。#37254
    • 💄 基础圆角调整为 6px，并支持梯度圆角。#37146 #37369
    • 💄 优化组件整体动画速度，效果更简练。#37438
    • 💄 对部分组件进行了去线框化和间距上的调整，整体风格更加简洁。#37283
      • 💄 Pagination 组件去线框化。#37441
      • 💄 优化 Timeline 组件 UI 设计。#37465
      • 💄 优化 Steps 组件 UI 设计。#37473
    • 💄 优化部分组件 focus 样式。#37483
    • 💄 优化组件圆角较大时的部分样式。
      • 💄 优化 Table 组件 hover 样式。#37370
      • 💄 优化 Segmented 组件 hover 样式。#37498
      • 💄 优化 Dropdown 组件 hover 样式。#37491
      • 💄 优化 Modal 等组件关闭按钮样式。#37634
      • 💄 优化 Menu 组件样式。#38009
      • 💄 更多组件 hover 样式优化。#37433
    • 💄 优化 Switch 组件动画效果。#37658
    • 💄 优化 Anchor 组件样式 UI 设计。#38616
  • 🆕 新增导出对象 theme，用于获取主题相关属性。#36302
    • 🆕 新增 theme.useToken hook，用于获取当前上下文的主题变量。#36267
    • 🆕 新增内置算法。
      • 🆕 默认算法 theme.defaultAlgorithm。#36175
      • 🆕 暗色算法 theme.darkAlgorithm。#36546 #36656
      • 🆕 紧凑算法 theme.compactAlgorithm。#38105
  • 🆕 ConfigProvider 新增 theme 属性，用于更改主题配置，详情：定制主题。
    • 🆕 支持多个 algorithm。#37082
    • 🆕 支持线框化切换。#37507
    • 🆕 支持覆盖单个组件的主题变量。#37568
  • 🆕 产物新增 locale 目录，内含 cjs 格式的语言文件。#38194 @chunsch
  • 🗑 移除对 IE 的支持。
  • 🗑 移除 lib 产物。#36362
    • 🛠 调整 package.json 中 main 为 dist/antd.js。eb8835f
  • 🗑 移除 dist/antd.css 产物。默认不再入侵全局样式，新增 dist/reset.css 用于重置部分常见样式。#36224
  • 🗑 废弃下列组件的 visible 属性，改用 open。@yykoypj
    • 🗑 Tag 废弃 visible 属性。#36671
    • 🗑 Table filterDropdownVisible 调整为 filterDropdownOpen。#36747
    • 🗑 Drawer 废弃 visible 属性，改用 open。#36750
    • 🗑 Modal 废弃 visible 属性，改用 open。#36774
    • 🗑 Dropdown 废弃 visible 属性，改用 open。#36799
    • 🗑 Tooltip & Popover & Popconfirm 废弃 visible 属性，改用 open。#36807
  • 🗑 废弃下列组件的 dropdownClassName，统一为 popupClassName。@heiyu4585
    • 🗑 AutoComplete 废弃 dropdownClassName，改用 popupClassName。#37087
    • 🗑 Mentions 废弃 dropdownClassName，改用 popupClassName。#37122
    • 🗑 Cascader 废弃 dropdownClassName，改用 popupClassName。#37089
    • 🗑 Select 废弃 dropdownClassName，改用 popupClassName。#37091
    • 🗑 TreeSelect 废弃 dropdownClassName，改用 popupClassName。#37092
    • 🗑 DatePicker 和 TimePicker 废弃 dropdownClassName，改用 popupClassName。#37207
  • 🛠 所有组件使用 CSS-in-JS 重构样式。
    • 🗑 移除 less 及相关 less 和 css 产物。#36244
  • 🛠 内置时间库由 Moment.js 替换为 Day.js，详情：使用自定义日期库。b22815d @iamkun
  • 🛠 重构 Notification 以支持 React 18 concurrent 模式，并重构 useNotification hook，推荐替代静态方法使用。#35423 #35568
  • 🛠 Slider 组件 Tooltip 相关 API 合并至 tooltip 属性中。#37043 @yykoypj
  • 🛠 文档站技术栈迁移 dumi@2。#38328