Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(steps): mobile-react 同步 steps 组件文档 #1951

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions docs/mobile/api/steps.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: Steps
description: Displays task steps or task progress.
spline: base
isComponent: true
toc: false
---

## Code Demo

Step bar, the direction can be horizontal and vertical, you can customize the step bar display content and whether it is writable

### Component Type

#### Horizontal Steps Bar

Supports three types: serial number, icon, and abbreviated

{{ horizontal }}


#### Vertical Steps Bar

Supports three types: serial number, icon, and abbreviated

{{ vertical }}

### Component Status

#### Tab Status

Four status are supported: default, finish, process and error.

{{ status }}


#### Special Types

Through the existing characteristics, two common types are modified:

- Vertical customization (used in Cascader)
- Pure display step bar
- You can refer to the following code to achieve

{{ special }}
38 changes: 24 additions & 14 deletions docs/mobile/api/steps.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,40 @@ isComponent: true
toc: false
---

### 横向可操作步骤条
## 代码演示

使用场景:常用于表单页,展示线性流程,且步骤支持随意切回/跳过
步骤条,方向可以横向和纵向,可以自定义步骤条显示内容以及是否可写

{{ click }}
### 组件类型

### 横向带图标可操作步骤条
#### 水平步骤条

{{ icon }}

### 横向只读步骤条

使用场景:常用于表单页,展示线性流程,且不能随意切回/跳过步骤
支持三种类型:序号、图标、简略

{{ horizontal }}

### 竖向只读步骤条

{{ vertical-readonly }}
#### 垂直步骤条

### 竖向简化只读步骤条
支持三种类型:序号、图标、简略

{{ vertical }}

### 自定义内容步骤条
### 组件状态

#### 选项卡状态

共支持 4 种状态:未完成(default)、已完成(finish)、进行中(process)、错误(error)

{{ status }}


#### 特殊类型

通过已有特性,改造出两种常见类型:

- 垂直自定义(在 Cascader 中使用)
- 纯展示步骤条
- 可以参考以下代码实现

{{ content }}
{{ special }}