Steps步骤条
Steps
步骤条
使用import { Steps } from 'antd'; |
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
通用属性参考：通用属性
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态 | number | 0 | × | |
指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | string | horizontal | × | ||
| iconRender | 自定义渲染图标，请优先使用 items.icon | (oriNode, info: { index, active, item }) => ReactNode | - | × | |
| initial | 起始序号，从 0 开始记数 | number | 0 | × | |
指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方 | string | horizontal | × | ||
| maxCount | 最大可见步骤项数量（>= 3）。超出数量的步骤区间会聚合成禁用的省略号步骤。 | number | - | × | |
| orientation | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | string | horizontal | × | |
| percent | 当前 process 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 | × |
点状步骤条，可以设置为一个 function，请使用 type="dot" 替代。titlePlacement 将强制为 vertical | boolean | (iconDot, { index, status, title, content }) => ReactNode | false | × | ||
| responsive | 当屏幕宽度小于 532px 时自动变为垂直模式 | boolean | true | × | |
| size | 指定大小，目前支持普通（medium）和迷你（small） | string | medium | × | |
| status | 指定当前步骤的状态，可选 wait process finish error | string | process | × | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| titlePlacement | 指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方 | string | horizontal | × | |
| type | 步骤条类型，可选 default dot inline navigation panel | string | default | × | |
| variant | 设置样式变体 | filled | outlined | filled | × | |
| onChange | 点击切换步骤时触发 | (current) => void | - | × | |
| items | 配置选项卡内容 | StepItem | [] | 4.24.0 | × |
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| content | 步骤的详情描述，可选 | ReactNode | - | |
| 步骤的详情描述，可选 | ReactNode | - | ||
| disabled | 禁用点击 | boolean | false | |
| icon | 步骤图标的类型，可选 | ReactNode | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error | string | wait | |
| subTitle | 子标题 | ReactNode | - | |
| title | 标题 | ReactNode | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| customIconFontSize | 自定义图标大小 | number | 24 |
| customIconSize | 自定义图标容器尺寸 | number | 32 |
| customIconTop | 自定义图标 top | number | 0 |
| dotCurrentSize | 点状步骤点当前大小 | number | 10 |
| dotSize | 点状步骤点大小 | number | 8 |
| iconFontSize | 图标大小 | number | 14 |
| iconSize | 图标容器尺寸 | number | 32 |
| iconSizeSM | 小号步骤条图标大小 | string | number | 24 |
| iconTop | 图标 top | number | -0.5 |
| navArrowColor | 可跳转步骤条箭头颜色 | string | rgba(0,0,0,0.25) |
| navContentMaxWidth | 可跳转步骤条内容最大宽度 | MaxWidth<string | number> | undefined | unset |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainer | 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。 | string | #ffffff |
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorErrorBg | 错误色的浅色背景颜色 | string | #fff2f0 |
| colorErrorBgFilledHover | 错误色的浅色填充背景色悬浮态，目前只用在危险填充按钮的 hover 效果。 | string | #ffdfdc |
| colorErrorHover | 错误色的深色悬浮态 | string | #ff7875 |
| colorFillTertiary | 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。 | string | rgba(0,0,0,0.04) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryBg | 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。 | string | #e6f4ff |
| colorPrimaryBgHover | 与主色浅色背景颜色相对应的悬浮态颜色。 | string | #bae0ff |
| colorPrimaryHover | 主色梯度下的悬浮态。 | string | #4096ff |
| colorSplit | 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。 | string | rgba(5,5,5,0.06) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDescription | 控制文本描述字体颜色。 | string | rgba(0,0,0,0.45) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| colorTextLabel | 控制文本标签字体颜色。 | string | rgba(0,0,0,0.65) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| colorTextQuaternary | 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。 | string | rgba(0,0,0,0.25) |
| colorTextSecondary | 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。 | string | rgba(0,0,0,0.65) |
| borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| controlHeight | Ant Design 中按钮和输入框等基础控件的高度 | number | 32 |
| controlItemBgHover | 控制组件项在鼠标悬浮时的背景颜色。 | string | rgba(0,0,0,0.04) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeIcon | 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。 | number | 12 |
| fontSizeLG | 大号字体大小 | number | 16 |
| fontSizeSM | 小号字体大小 | number | 12 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineHeightSM | 小型文本行高 | number | 1.6666666666666667 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthBold | 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。 | number | 2 |
| margin | 控制元素外边距，中等尺寸。 | number | 16 |
| marginSM | 控制元素外边距，中小尺寸。 | number | 12 |
| marginXS | 控制元素外边距，小尺寸。 | number | 8 |
| marginXXS | 控制元素外边距，最小尺寸。 | number | 4 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| paddingSM | 控制元素的小内间距。 | number | 12 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |