StepAPI

React Step 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件的使用示例和详细信息，请访问组件演示页面

import Step from '@mui/joy/Step';
// or
import { Step } from '@mui/joy';

阅读这篇关于最小化 bundle 大小的指南，了解它们之间的区别。

也提供原生组件的 Props。

名称	类型	默认值	描述
active	bool	false	如果为 `true`，则会附加 active className。你可以从 Stepper 的 `sx` prop 中自定义 active 状态。
children	node	-	如果未设置 `src`，则用于在 Step 内部渲染图标或文本元素。这可以是元素，也可以只是字符串。
completed	bool	false	如果为 `true`，则会附加 completed className。你可以从 Stepper 的 `sx` prop 中自定义 completed 状态。
component	elementType	-	用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。
disabled	bool	false	如果为 `true`，则会附加 active className。你可以从 Stepper 的 `sx` prop 中自定义 active 状态。
indicator	node	-	要显示的指示器。如果提供，将使用包装器元素。
orientation	'horizontal' \| 'vertical'	'horizontal'	组件方向。
slotProps	{ indicator?: func \| object, root?: func \| object }	{}	用于每个 slot 内部的 props。
slots	{ indicator?: elementType, root?: elementType }	{}	用于每个 slot 内部的组件。有关更多详细信息，请参阅下面的 Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	系统属性，允许定义系统 overrides 以及其他 CSS 样式。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

你可以使用 JoyStep 通过主题更改此组件的默认 props。

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.MuiStep-root	`'li'`	渲染 root 的组件。
indicator	indicator	`.MuiStep-indicator`	'div'

CSS 类

类名	这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的 slots。	描述
.规则名称		Mui-active
.如果 `active` 为 true，则应用于根元素的类名。		Mui-completed
.如果 `completed` 为 true，则应用于根元素的类名。		Mui-disabled
.如果 `disabled` 为 true，则应用于根元素的类名。	MuiStep-horizontal	horizontal
.如果 `orientation="horizontal"`，则应用于根元素的类名。	MuiStep-vertical	vertical

如果 orientation="vertical"，则应用于根元素的类名。

源代码