antd Flex 弹性布局组件实战对齐、间隙、换行与源码级原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designFlex 是 antdAnt Design提供的弹性布局容器组件用于以 Flexbox 方式处理子元素的间距、水平/垂直对齐与换行排布自antd5.10.0起正式提供。本文以仓库内 Flex 官方文档 为骨架结合 组件源码、类型定义、样式生成 与 单元测试带你完整掌握 Flex 的每个 API、真实 demo 用法及其底层实现原理读完即可在实际页面中熟练落地各类弹性布局。何时使用为块级元素提供间距与对齐按官方文档的界定Flex 组件适合以下两类布局诉求设置元素之间的间距通过gap属性即可在主轴与交叉轴上统一产生间隙无需为每个子元素手动加 margin。设置各种水平、垂直对齐方式通过justify主轴与align交叉轴组合出灵活的对齐效果。与 Space 组件的区别同一布局分组下的 Space 组件 常被拿来与 Flex 比较官方文档给出清晰的分工对比维度SpaceFlex适用元素为内联元素提供间距为块级元素提供间距包裹层会为每个子元素添加包裹元素用于内联对齐不会添加任何包裹元素适用场景行、列中多个子元素的等距排列垂直或水平方向上的子元素布局提供更多灵活性与控制能力换句话说当需要等距排列一排按钮/标签这种简单场景时可优先 Space而当需要完整掌控主轴、交叉轴、换行与弹性伸缩时Flex 是无包裹层、直出语义更干净的选择。基础用法一行代码得到 Flexbox 容器Flex 的渲染实现非常轻量。从 组件源码 看它通过React.forwardRef直接渲染为你指定的元素默认div不产生任何中间包裹节点子元素原样透传const Flex React.forwardRefHTMLElement, React.PropsWithChildrenFlexProps((props, ref) { // ...合并 className / style 后直接渲染 return ( Component ref{ref} className{mergedCls} style{mergedStyle} {...othersProps} {children} /Component ); });对应 basic 示例通过vertical切换主轴方向即可实现水平/垂直两种排布import React from react; import { Flex, Radio } from antd; const baseStyle: React.CSSProperties { width: 25%, height: 54 }; const App: React.FC () { const [value, setValue] React.useStatestring(horizontal); return ( Flex gapmedium vertical Radio.Group value{value} onChange{(e) setValue(e.target.value)} Radio valuehorizontalhorizontal/Radio Radio valueverticalvertical/Radio /Radio.Group Flex vertical{value vertical} {Array.from({ length: 4 }).map((_, i) ( div key{i} style{{ ...baseStyle, backgroundColor: i % 2 ? #1677ff : #1677ffbf }} / ))} /Flex /Flex ); }; export default App;API 参数详解自antd5.10.0版本开始提供该组件。Flex 组件的默认行为是水平模式下向上对齐贴近flex-start垂直模式下拉伸对齐stretch你可以通过属性调整。通用属性参考通用属性文档。属性说明类型默认值版本全局配置verticalflex 主轴的方向是否垂直使用flex-direction: columnbooleanfalse5.10.05.10.0wrap设置元素单行显示还是多行显示flex-wrap | booleannowrapboolean: 5.17.0×justify设置元素在主轴方向上的对齐方式justify-contentnormal×align设置元素在交叉轴方向上的对齐方式align-itemsnormal×flexflex CSS 简写属性flexnormal×gap设置网格之间的间隙small|medium|large| string | number-×component自定义元素类型React.ComponentTypediv×orientation主轴的方向类型horizontal|verticalhorizontal-×对应 TypeScript 定义位于 interface.tsexport interface FlexPropsP AnyObject extends React.HTMLAttributesHTMLElement { prefixCls?: string; rootClassName?: string; vertical?: boolean; orientation?: Orientation; // horizontal | vertical wrap?: boolean | React.CSSProperties[flexWrap]; justify?: React.CSSProperties[justifyContent]; align?: React.CSSProperties[alignItems]; flex?: React.CSSProperties[flex]; gap?: LiteralUnionSizeType, React.CSSProperties[gap]; component?: CustomComponentP; }orientation 与 vertical两种指定主轴方向的方式orientation与vertical都用于控制主轴方向二者通过_util/hooks/useOrientation这一工具 Hook 完成归一化合并。从源码可见index.tsx 中的调用为const [, mergedVertical] useOrientation(orientation, vertical ?? ctxFlex?.vertical);即显式传入的orientation优先必须是horizontal/vertical二者之一未传时才回退到vertical布尔值再回退到ConfigProvider中的全局配置。合并结果最终落到 CSS 上由 样式文件 中的-vertical规则实现flex-direction: column.ant-flex-vertical { flex-direction: column; }justify 与 align主轴 / 交叉轴对齐justify映射justify-contentalign映射align-items。Flex 并非把这些值直接写进内联 style而是通过白名单生成语义化 class。白名单集中在 utils.tsjustifyContentValuesflex-start、flex-end、start、end、center、space-between、space-around、space-evenly、stretch、normal、left、rightalignItemsValuescenter、start、end、flex-start、flex-end、self-start、self-end、baseline、normal、stretch。每个合法值都会生成形如.ant-flex-justify-center、.ant-flex-align-center的类名再由样式文件统一产出对应 CSS 属性实现类名与 CSS 的一一对应。值得注意的默认行为在genClsAlign中当未设置align且方向为垂直时会自动补上ant-flex-align-stretch实现垂直模式下的拉伸对齐alignCls[${prefixCls}-align-stretch] !props.align !!props.vertical;这与单元测试相互印证——index.test.tsx 断言Flex vertical会输出ant-flex-align-stretch类而一旦显式指定aligncenter则替换为ant-flex-align-center。align 示例 演示了如何联动 Segmented 实时调节对齐import React from react; import { Button, Flex, Segmented } from antd; import type { FlexProps } from antd; const justifyOptions [flex-start, center, flex-end, space-between, space-around, space-evenly]; const alignOptions [flex-start, center, flex-end]; const App: React.FC () { const [justify, setJustify] React.useStateFlexProps[justify](justifyOptions[0]); const [alignItems, setAlignItems] React.useStateFlexProps[align](alignOptions[0]); return ( Flex gapmedium alignstart vertical pSelect justify :/p Segmented options{justifyOptions} onChange{setJustify} / pSelect align :/p Segmented options{alignOptions} onChange{setAlignItems} / Flex style{{ width: 100%, height: 120, border: 1px solid #40a9ff, borderRadius: 6 }} justify{justify} align{alignItems} Button typeprimaryPrimary/Button Button typeprimaryPrimary/Button Button typeprimaryPrimary/Button /Flex /Flex ); }; export default App;flex直接下发伸缩简写当传入flex属性时组件会将其写进容器的内联样式见 index.tsx 的mergedStyle.flex flex等价于在容器上设置 CSSflex简写如flex0 1 auto适用于把 Flex 容器本身当作某个更大的 flex 布局中的弹性子项的场景。单元测试对此也有覆盖rerender(Flex flex0 1 autotest/Flex)后断言容器flex: 0 1 auto。wrap单行还是多行wrap默认值为nowrap控制子元素是否允许换行。自antd5.17.0起支持直接传booleantrue等价于wrap。wrap 示例 展示了 24 个按钮在空间不足时自动折行import React from react; import { Button, Flex } from antd; const Demo: React.FC () ( Flex wrap gapsmall {Array.from({ length: 24 }, (_, i) ( Button key{i} typeprimaryButton/Button ))} /Flex ); export default Demo;实现上utils.ts 的flexWrapValues白名单为wrap、nowrap、wrap-reversewrap true时归一化为wrap并生成.ant-flex-wrap-wrap类false或缺省则维持 CSS 默认的nowrap。gap三档预设 任意自定义间隙gap是 Flex 最常用的间距手段同时支持预设档位与任意 CSS 值/数字两种写法分流逻辑见 index.tsxif (isNonNullable(gap) !isPresetSize(gap)) { mergedStyle.gap gap; // 非预设值走内联 style }预设值small/medium/large同时兼容middle走 class 路线且数值来自主题 token见 style/index.ts.ant-flex-gap-small { gap: token.flexGapSM; } /* paddingXS */ .ant-flex-gap-medium, { gap: token.flexGap; } /* padding */ .ant-flex-gap-middle, { gap: token.flexGap; } .ant-flex-gap-large { gap: token.flexGapLG; } /* paddingLG */其中 token 是否命中预设由 _util/gapSize.ts 的isPresetSize判定白名单为small/middle/medium/large。也就是说预设间距会随主题的padding系 token 一起缩放保证与整站间距体系一致。当传入数字或任意 CSS 字符串如100、inherit时则直接写入内联style.gap。测试中Flex gap{100} /断言输出gap: 100px、Flex gapinherit /断言输出gap: inherit。参照 gap 示例自定义档位可通过 Slider 动态给出数字Flex gap{gapSize ! customize ? gapSize : customGapSize} Button typeprimaryPrimary/Button ButtonDefault/Button Button typedashedDashed/Button Button typelinkLink/Button /Flexcomponent替换渲染元素类型默认渲染为div传入component可换成任意 HTML 标签或自定义 React 组件如componentspan。测试 index.test.tsx 验证了字符串标签、函数组件与 class 组件三种形态均能正确透传 ref 与 className对自定义组件场景类型上对应CustomComponentP来自 _util/type.ts。组合使用图文卡片实战Flex 的典型价值在于无需包裹层、直接驱动原生子元素。官方 combination 示例 用嵌套 Flex 拼出一张图文左右布局的卡片外层justifyspace-between让图片与文本块左右两端对齐内层verticalalignflex-endjustifyspace-between让标题与按钮在右侧垂直两端排布import React from react; import { Button, Card, Flex, Typography } from antd; const cardStyle: React.CSSProperties { width: 620 }; const imgStyle: React.CSSProperties { display: block, width: 273 }; const App: React.FC () ( Card hoverable style{cardStyle} styles{{ body: { padding: 0, overflow: hidden } }} Flex justifyspace-between img draggable{false} altavatar src... style{imgStyle} / Flex vertical alignflex-end justifyspace-between style{{ padding: 32 }} Typography.Title level{3} antd is an enterprise-class UI design language and React UI library. /Typography.Title Button typeprimaryGet Started/Button /Flex /Flex /Card ); export default App;这个例子同时示范了justify、align、vertical、gap四个核心属性的嵌套组合是日常页面布局中非常高频的写法。通过 ConfigProvider 做全局默认值Flex 支持组件级全局配置。源码中组件通过useContext(ConfigContext)取出flex: ctxFlex见 index.tsx读取其中的vertical、className、style作为兜底mergedVertical回退链为orientation→ 本组件vertical→ 全局flex.verticalclassName与style都会与本地传入值做浅合并{ ...ctxFlex?.style, ...style }。这意味着你可以在 ConfigProvider 组件配置 中统一设定flex的垂直方向例如让全站卡片区默认纵向排列个别页面再用组件 props 覆盖。Design Token 与主题定制Flex 同样遵循 antd 的 token 体系组件 token 表格由ComponentTokenTable componentFlex动态渲染。其样式由genStyleHooks统一注册style/index.ts 定义了三个组件级 tokenToken 名语义默认取值为flexGapSM元素的小间隙paddingXSflexGap元素的间隙paddingflexGapLG元素的大间隙paddingLG三者与预设档位一一对应因此想全局调整gapmedium的实际像素值只需通过theme.components.Flex覆盖对应 token。此外样式生成时显式设置了resetStyle: false注释指向 issue #46403即 Flex 不做额外的字体 reset避免影响布局内的排版继承。基础样式层面还包含几个不易察觉的细节见genFlexStyle容器自带display: flex; margin: 0; padding: 0.ant-flex-rtl在 RTL 模式下设置direction: rtl对应 _util 中的 RTL 支持与 rtlTest当容器没有子元素时:empty { display: none; }避免空 Flex 占据布局空间。小结概括起来antd Flex 的核心设计可以归纳为三点无包裹层直接渲染目标元素DOM 更干净、class 驱动对齐justify/align/wrap通过白名单 class 生效便于主题与调试、token 化的预设间隙gap三档预设与主题间距体系打通同时支持任意数值兜底。对于 Space 之外那些需要块级布局 灵活对齐的场景优先考虑 Flex动手前不妨把 basic、align、gap、wrap、combination 五个官方示例跑一遍即可快速覆盖该组件绝大部分日常用法。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
antd Flex 弹性布局组件实战对齐、间隙、换行与源码级原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designFlex 是 antdAnt Design提供的弹性布局容器组件用于以 Flexbox 方式处理子元素的间距、水平/垂直对齐与换行排布自antd5.10.0起正式提供。本文以仓库内 Flex 官方文档 为骨架结合 组件源码、类型定义、样式生成 与 单元测试带你完整掌握 Flex 的每个 API、真实 demo 用法及其底层实现原理读完即可在实际页面中熟练落地各类弹性布局。何时使用为块级元素提供间距与对齐按官方文档的界定Flex 组件适合以下两类布局诉求设置元素之间的间距通过gap属性即可在主轴与交叉轴上统一产生间隙无需为每个子元素手动加 margin。设置各种水平、垂直对齐方式通过justify主轴与align交叉轴组合出灵活的对齐效果。与 Space 组件的区别同一布局分组下的 Space 组件 常被拿来与 Flex 比较官方文档给出清晰的分工对比维度SpaceFlex适用元素为内联元素提供间距为块级元素提供间距包裹层会为每个子元素添加包裹元素用于内联对齐不会添加任何包裹元素适用场景行、列中多个子元素的等距排列垂直或水平方向上的子元素布局提供更多灵活性与控制能力换句话说当需要等距排列一排按钮/标签这种简单场景时可优先 Space而当需要完整掌控主轴、交叉轴、换行与弹性伸缩时Flex 是无包裹层、直出语义更干净的选择。基础用法一行代码得到 Flexbox 容器Flex 的渲染实现非常轻量。从 组件源码 看它通过React.forwardRef直接渲染为你指定的元素默认div不产生任何中间包裹节点子元素原样透传const Flex React.forwardRefHTMLElement, React.PropsWithChildrenFlexProps((props, ref) { // ...合并 className / style 后直接渲染 return ( Component ref{ref} className{mergedCls} style{mergedStyle} {...othersProps} {children} /Component ); });对应 basic 示例通过vertical切换主轴方向即可实现水平/垂直两种排布import React from react; import { Flex, Radio } from antd; const baseStyle: React.CSSProperties { width: 25%, height: 54 }; const App: React.FC () { const [value, setValue] React.useStatestring(horizontal); return ( Flex gapmedium vertical Radio.Group value{value} onChange{(e) setValue(e.target.value)} Radio valuehorizontalhorizontal/Radio Radio valueverticalvertical/Radio /Radio.Group Flex vertical{value vertical} {Array.from({ length: 4 }).map((_, i) ( div key{i} style{{ ...baseStyle, backgroundColor: i % 2 ? #1677ff : #1677ffbf }} / ))} /Flex /Flex ); }; export default App;API 参数详解自antd5.10.0版本开始提供该组件。Flex 组件的默认行为是水平模式下向上对齐贴近flex-start垂直模式下拉伸对齐stretch你可以通过属性调整。通用属性参考通用属性文档。属性说明类型默认值版本全局配置verticalflex 主轴的方向是否垂直使用flex-direction: columnbooleanfalse5.10.05.10.0wrap设置元素单行显示还是多行显示flex-wrap | booleannowrapboolean: 5.17.0×justify设置元素在主轴方向上的对齐方式justify-contentnormal×align设置元素在交叉轴方向上的对齐方式align-itemsnormal×flexflex CSS 简写属性flexnormal×gap设置网格之间的间隙small|medium|large| string | number-×component自定义元素类型React.ComponentTypediv×orientation主轴的方向类型horizontal|verticalhorizontal-×对应 TypeScript 定义位于 interface.tsexport interface FlexPropsP AnyObject extends React.HTMLAttributesHTMLElement { prefixCls?: string; rootClassName?: string; vertical?: boolean; orientation?: Orientation; // horizontal | vertical wrap?: boolean | React.CSSProperties[flexWrap]; justify?: React.CSSProperties[justifyContent]; align?: React.CSSProperties[alignItems]; flex?: React.CSSProperties[flex]; gap?: LiteralUnionSizeType, React.CSSProperties[gap]; component?: CustomComponentP; }orientation 与 vertical两种指定主轴方向的方式orientation与vertical都用于控制主轴方向二者通过_util/hooks/useOrientation这一工具 Hook 完成归一化合并。从源码可见index.tsx 中的调用为const [, mergedVertical] useOrientation(orientation, vertical ?? ctxFlex?.vertical);即显式传入的orientation优先必须是horizontal/vertical二者之一未传时才回退到vertical布尔值再回退到ConfigProvider中的全局配置。合并结果最终落到 CSS 上由 样式文件 中的-vertical规则实现flex-direction: column.ant-flex-vertical { flex-direction: column; }justify 与 align主轴 / 交叉轴对齐justify映射justify-contentalign映射align-items。Flex 并非把这些值直接写进内联 style而是通过白名单生成语义化 class。白名单集中在 utils.tsjustifyContentValuesflex-start、flex-end、start、end、center、space-between、space-around、space-evenly、stretch、normal、left、rightalignItemsValuescenter、start、end、flex-start、flex-end、self-start、self-end、baseline、normal、stretch。每个合法值都会生成形如.ant-flex-justify-center、.ant-flex-align-center的类名再由样式文件统一产出对应 CSS 属性实现类名与 CSS 的一一对应。值得注意的默认行为在genClsAlign中当未设置align且方向为垂直时会自动补上ant-flex-align-stretch实现垂直模式下的拉伸对齐alignCls[${prefixCls}-align-stretch] !props.align !!props.vertical;这与单元测试相互印证——index.test.tsx 断言Flex vertical会输出ant-flex-align-stretch类而一旦显式指定aligncenter则替换为ant-flex-align-center。align 示例 演示了如何联动 Segmented 实时调节对齐import React from react; import { Button, Flex, Segmented } from antd; import type { FlexProps } from antd; const justifyOptions [flex-start, center, flex-end, space-between, space-around, space-evenly]; const alignOptions [flex-start, center, flex-end]; const App: React.FC () { const [justify, setJustify] React.useStateFlexProps[justify](justifyOptions[0]); const [alignItems, setAlignItems] React.useStateFlexProps[align](alignOptions[0]); return ( Flex gapmedium alignstart vertical pSelect justify :/p Segmented options{justifyOptions} onChange{setJustify} / pSelect align :/p Segmented options{alignOptions} onChange{setAlignItems} / Flex style{{ width: 100%, height: 120, border: 1px solid #40a9ff, borderRadius: 6 }} justify{justify} align{alignItems} Button typeprimaryPrimary/Button Button typeprimaryPrimary/Button Button typeprimaryPrimary/Button /Flex /Flex ); }; export default App;flex直接下发伸缩简写当传入flex属性时组件会将其写进容器的内联样式见 index.tsx 的mergedStyle.flex flex等价于在容器上设置 CSSflex简写如flex0 1 auto适用于把 Flex 容器本身当作某个更大的 flex 布局中的弹性子项的场景。单元测试对此也有覆盖rerender(Flex flex0 1 autotest/Flex)后断言容器flex: 0 1 auto。wrap单行还是多行wrap默认值为nowrap控制子元素是否允许换行。自antd5.17.0起支持直接传booleantrue等价于wrap。wrap 示例 展示了 24 个按钮在空间不足时自动折行import React from react; import { Button, Flex } from antd; const Demo: React.FC () ( Flex wrap gapsmall {Array.from({ length: 24 }, (_, i) ( Button key{i} typeprimaryButton/Button ))} /Flex ); export default Demo;实现上utils.ts 的flexWrapValues白名单为wrap、nowrap、wrap-reversewrap true时归一化为wrap并生成.ant-flex-wrap-wrap类false或缺省则维持 CSS 默认的nowrap。gap三档预设 任意自定义间隙gap是 Flex 最常用的间距手段同时支持预设档位与任意 CSS 值/数字两种写法分流逻辑见 index.tsxif (isNonNullable(gap) !isPresetSize(gap)) { mergedStyle.gap gap; // 非预设值走内联 style }预设值small/medium/large同时兼容middle走 class 路线且数值来自主题 token见 style/index.ts.ant-flex-gap-small { gap: token.flexGapSM; } /* paddingXS */ .ant-flex-gap-medium, { gap: token.flexGap; } /* padding */ .ant-flex-gap-middle, { gap: token.flexGap; } .ant-flex-gap-large { gap: token.flexGapLG; } /* paddingLG */其中 token 是否命中预设由 _util/gapSize.ts 的isPresetSize判定白名单为small/middle/medium/large。也就是说预设间距会随主题的padding系 token 一起缩放保证与整站间距体系一致。当传入数字或任意 CSS 字符串如100、inherit时则直接写入内联style.gap。测试中Flex gap{100} /断言输出gap: 100px、Flex gapinherit /断言输出gap: inherit。参照 gap 示例自定义档位可通过 Slider 动态给出数字Flex gap{gapSize ! customize ? gapSize : customGapSize} Button typeprimaryPrimary/Button ButtonDefault/Button Button typedashedDashed/Button Button typelinkLink/Button /Flexcomponent替换渲染元素类型默认渲染为div传入component可换成任意 HTML 标签或自定义 React 组件如componentspan。测试 index.test.tsx 验证了字符串标签、函数组件与 class 组件三种形态均能正确透传 ref 与 className对自定义组件场景类型上对应CustomComponentP来自 _util/type.ts。组合使用图文卡片实战Flex 的典型价值在于无需包裹层、直接驱动原生子元素。官方 combination 示例 用嵌套 Flex 拼出一张图文左右布局的卡片外层justifyspace-between让图片与文本块左右两端对齐内层verticalalignflex-endjustifyspace-between让标题与按钮在右侧垂直两端排布import React from react; import { Button, Card, Flex, Typography } from antd; const cardStyle: React.CSSProperties { width: 620 }; const imgStyle: React.CSSProperties { display: block, width: 273 }; const App: React.FC () ( Card hoverable style{cardStyle} styles{{ body: { padding: 0, overflow: hidden } }} Flex justifyspace-between img draggable{false} altavatar src... style{imgStyle} / Flex vertical alignflex-end justifyspace-between style{{ padding: 32 }} Typography.Title level{3} antd is an enterprise-class UI design language and React UI library. /Typography.Title Button typeprimaryGet Started/Button /Flex /Flex /Card ); export default App;这个例子同时示范了justify、align、vertical、gap四个核心属性的嵌套组合是日常页面布局中非常高频的写法。通过 ConfigProvider 做全局默认值Flex 支持组件级全局配置。源码中组件通过useContext(ConfigContext)取出flex: ctxFlex见 index.tsx读取其中的vertical、className、style作为兜底mergedVertical回退链为orientation→ 本组件vertical→ 全局flex.verticalclassName与style都会与本地传入值做浅合并{ ...ctxFlex?.style, ...style }。这意味着你可以在 ConfigProvider 组件配置 中统一设定flex的垂直方向例如让全站卡片区默认纵向排列个别页面再用组件 props 覆盖。Design Token 与主题定制Flex 同样遵循 antd 的 token 体系组件 token 表格由ComponentTokenTable componentFlex动态渲染。其样式由genStyleHooks统一注册style/index.ts 定义了三个组件级 tokenToken 名语义默认取值为flexGapSM元素的小间隙paddingXSflexGap元素的间隙paddingflexGapLG元素的大间隙paddingLG三者与预设档位一一对应因此想全局调整gapmedium的实际像素值只需通过theme.components.Flex覆盖对应 token。此外样式生成时显式设置了resetStyle: false注释指向 issue #46403即 Flex 不做额外的字体 reset避免影响布局内的排版继承。基础样式层面还包含几个不易察觉的细节见genFlexStyle容器自带display: flex; margin: 0; padding: 0.ant-flex-rtl在 RTL 模式下设置direction: rtl对应 _util 中的 RTL 支持与 rtlTest当容器没有子元素时:empty { display: none; }避免空 Flex 占据布局空间。小结概括起来antd Flex 的核心设计可以归纳为三点无包裹层直接渲染目标元素DOM 更干净、class 驱动对齐justify/align/wrap通过白名单 class 生效便于主题与调试、token 化的预设间隙gap三档预设与主题间距体系打通同时支持任意数值兜底。对于 Space 之外那些需要块级布局 灵活对齐的场景优先考虑 Flex动手前不妨把 basic、align、gap、wrap、combination 五个官方示例跑一遍即可快速覆盖该组件绝大部分日常用法。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
