antdv5介绍
https://next.ant.design/components/button-cn
设计系统，应该考虑约束和自由的平衡，保持底层基础设施的一致性和高效率
不希望开发者对细节样式进行过多修改，让设计成为一种敏捷、简单的企业级产品
提供相关组件以使其在 LowCode 上易于使用
三大设计原则

  1. 更聚焦
  2. 去干扰
  3. 轻松感

antd v5新特性

  1. moment替换为 dayjs
  2. 基于 Design Token 和 CSS-in-JS 定制主题方案
    1. 全局主题定制
    2. 局部主题
      1. 嵌套主题
      2. 多主题并行
    3. 组件主题定制
  3. 增加了基础圆角的大小
  4. 移除 babel-plugin-import
  5. 交互动画速度，交互体验更加流畅

antdv5 新增组件

  1. Tour 漫游式引导，引导用户认识新的特性并学习新功能
    1. Tour文档 https://github.com/ant-design/ant-design/discussions/37712
  2. QrCode 二维码
  3. WaterMark 水印
  4. FloatButton 悬浮按钮
  5. Progress
    1. 自适应进度条 https://github.com/ant-design/ant-design/discussions/38226

PageHeader

antd 删除了PageHeader，从 pro-components 中获取

  1. - import type  { PageHeaderProps } from 'antd';
  2. - import { PageHeader } from 'antd';
  4. + import type { PageHeaderProps } from '@ant-design/pro-components';
  5. + import { PageHeader } from '@ant-design/pro-components';

Space

按钮组分隔符，代替 Divider

  1. import { Divider, Space, Typography } from 'antd';
  3. const { Link } = Typography;
  4. const App: React.FC = () => (
  5.   <Space split={<Divider type="vertical" />}>
  6.     <Link>Link</Link>
  7.     <Link>Link</Link>
  8.     <Link>Link</Link>
  9.   </Space>
  10. );

Space.Compact

https://github.com/ant-design/ant-design/discussions/37521
http://ant-design.antgroup.com/components/space-cn/#components-space-demo-compact-nested
Space.Compact 代替 Button.Group
新增 Space.Compact 组件，表示一个紧凑排列的组，
支持将表单类组件（如 Input、Select、Button）进行成组包裹，
逐步废弃和替换原 Input.Group 和 Button.Group 的用法

  • 目前 Input.Group 和 Button.Group 在一定程度上存在功能重复的情况
  • Input.Group 可用于包括 Select 等其他表单组件，该 API namespace 挂在 Input 上表意不清
  • v5 中正式移除 Button.Group
  • v6 中将正式移除 Input.Group API
  • 通过 Space.Compact 组件，支持原 Input.Group 和 Button.Group 等表单类组件的成组效果
  • 替换 Dropdown.Button 和 ```tsx import { Button, Menu, Dropdown, Space, Tooltip } from ‘antd’; import { DownloadOutlined, EllipsisOutlined } from ‘@ant-design/icons’;

const App: React.FC = () => ( 

  1.   <Tooltip title="Tooltip">
  2.     <Button icon={<DownloadOutlined />} disabled />
  3.   </Tooltip>
  5.   <Dropdown
  6.     placement="bottomRight"
  7.     overlay={
  8.       <Menu
  9.         items={[
  10.           {
  11.             key: '1',
  12.             label: '1st item',
  13.           },
  14.           {
  15.             key: '2',
  16.             label: '2nd item',
  17.           },
  18.           {
  19.             key: '3',
  20.             label: '3rd item',
  21.           },
  22.         ]}
  23.       />
  24.     }
  25.     trigger={['click']}
  26.   >
  27.     <Button type="primary" icon={<EllipsisOutlined />} />
  28.   </Dropdown>
  29. </Space.Compact>

);

// 输入框组合

// 设置 tooltip的宽度

  2. <a name="lqA2N"></a>
  3. ### FloatButton
  4. FloatButton 右下角浮动按钮<br />[https://github.com/ant-design/ant-design/discussions/37406](https://github.com/ant-design/ant-design/discussions/37406)
  5. <a name="xdCRJ"></a>
  6. ### dayjs
  • import moment from ‘moment’;
  • import dayjs from ‘dayjs’;
  • moment.isMoment(text);
  • dayjs.isDayjs(text);

// next

  • moment(text).fromNow()
  • import relativeTime from ‘dayjs/plugin/relativeTime’;
  • dayjs.extend(relativeTime);
  • dayjs(text).fromNow() ```

picker

https://github.com/react-component/picker

ts导出默认属性

  1. import { Table } from 'antd';
  3. type Props<T extends (...args: any) => any> = Parameters<T>[0];
  5. type TableProps = Props<typeof Table<{ key: string; name: string; age: number }>>;
  6. type DataSource = TableProps['dataSource'];

theme

  1. const theme = require('@ant-design/antd-theme-variable');
  3. umi
  4.  theme: {
  5.     '@ant-prefix': 'ant',
  6. +   ...theme,
  7.     '@s-site-menu-width': '258px',
  8.     '@root-entry-name': 'variable',
  9.     '@border-radius-base': '4px',
  10.     '@primary-color': '#1677FF',
  11.     '@error-color': '#ff4d4',
  12.     '@info-color': '#52c41a',
  13.     '@warning-color': '#faad14',
  14.   },
  16. webpack
  17. {
  18.   loader: "less-loader",
  19.   options: {
  20.     lessOptions: {
  21.       javascriptEnabled: true,
  22. +     modifyVars: { ...theme, "@warning-color": "#faad14" },
  23.     },
  24.   },
  25. };

组件属性修改

open代替 visible

open属性，v4.23.0 之前是 visible，之后修改为 open

  • open = 键盘按4下
  • visible = 键盘按7下
  • 开发少打3个字，单输出提升43%开发速度

antd5 工具辅助

  1. 主题编辑器
    1. https://next.ant.design/docs/react/customize-theme-v5-cn
    2. https://ant-design.github.io/antd-token-previewer/~demos/docs-theme-editor-simple
  2. 组件支持复制粘贴到 Sketch
  3. V4 迁移至 V5 的 codemod 工具
    1. 如何在一个项目内同时兼容 v3版本 和 v4版本？
      1. 旧版如果不发版，不维护，是否可以考虑 webpack externals 方式，引入一个 antd.min.js
    2. 对于大系统，多一个 min.js 也是可以接受的，毕竟有缓存后再也不会请求，对于小页面，也没有升级负担。不需要兼容方式
      1. 多版本 antd 对 bundle size 不友好
      2. antd 本身对 global 是有一些依赖，比如说 Modal 多版本弹窗那滚动条其实就同步不了。所以还是在一个包的上下文会更兼容。