layui/example/docs/zh-CN/components/step.md

::: anchor :::

::: title 基础使用 :::

::: demo

上一步 下一步

:::

::: title composition 为row 的排版 :::

::: demo

:::

::: title 带标题带描述 :::

::: demo

:::

::: title 设置当前选中状态 :::

::: demo

上一步 下一步

:::

::: title 设置第几步状态 :::

这里设置status 会覆盖掉current-status

::: demo

上一步 下一步

:::

::: title 自定义宽度 :::

::: demo

上一步 下一步

:::

::: title 自定义图标 :::

::: demo

上一步 下一步

:::

::: title 居中 :::

::: demo

上一步 下一步

:::

::: title 垂直 :::

::: demo

:::

::: title 简洁版 :::

简洁版不支持垂直``横向``描述``排版

::: demo

:::

::: title step步骤条属性 :::

::: table

属性	描述	类型	可选值	默认值
active	第几步	number	-	0
center	居中布局	boolean	true false	false
direction	垂直/平行布局	string	horizontal vertical	horizontal
space	宽度	string	-	auto
currentStatus	当前状态显示	string	primary success fail warning	success
composition	排版	string	default row	default
simple	简洁版	boolean	true false	false
onChange	点击切换时监听	function	-	function(index){}

:::

::: title stepItem步骤条属性 :::

::: table

属性	描述	类型	可选值	默认值
title	标题	string	-	-
content	内容描述	string	-	-
icon	图标	string	-	-
status	状态	string	primary success fail warning	primary

:::

::: title stepItem步骤条slot :::

::: table

属性	描述
pace	圆圈内容自定义
default	内容区域自定义

:::

::: comment :::

::: previousNext step :::