# @wines/step

> The step @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/step
pnpm add @wines/step
yarn add @wines/step
bun add @wines/step
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 3 |
| Unpacked size | 20 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/step
- Repository: https://gitlab.itcjf.com/wines/step
- npm.io page: https://npm.io/package/@wines/step

## Dependencies (3)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/icon](https://npm.io/package/@wines/icon.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.2 — 2021-09-24
- 1.3.1 — 2021-04-25
- … 1 more at https://npm.io/package/@wines/step/versions

## README

# `@wines/step`

# Step 步骤条

显示一个任务的进度；或者引导用户完成某个复杂任务。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "Steps",
  "usingComponents": {
    "wux-step": "@wines/step",
    "wux-steps": "@wines/steps",
    "wux-button": "@wines/button"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">Steps</view>
		<view class="page__desc">步骤条</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Default</view>
		<wux-steps>
			<wux-step status="finish" title="Finished" content="This is description" />
			<wux-step status="process" title="In Progress" content="This is description" />
			<wux-step status="wait" title="Waiting" content="This is description" />
		</wux-steps>
		<view class="sub-title">Direction = vertical</view>
		<wux-steps direction="vertical">
			<wux-step status="finish" title="Finished" content="This is description" />
			<wux-step status="process" title="In Progress" content="This is description" />
			<wux-step status="error" title="Error" content="This is description" />
		</wux-steps>
		<view class="sub-title">Current</view>
		<wux-steps current="{{ current }}">
			<wux-step title="First" />
			<wux-step title="Second" />
			<wux-step title="Third" />
		</wux-steps>
		<view class="button-sp-area">
			<wux-button block type="light" bind:click="onClick">Next step</wux-button>
		</view>
	</view>
</view>


```

```ts
import './index.less';

Page({
  data: {
    current: 1,
  },
  onClick() {
    const current = this.data.current + 1 > 2 ? 0 : this.data.current + 1;

    this.setData({
      current,
    });
  },
});
```

## API

### Steps props

| 参数      | 类型     | 描述                                                                          | 默认值     |
| --------- | -------- | ----------------------------------------------------------------------------- | ---------- |
| prefixCls | `string` | 自定义类名前缀                                                                | wux-steps  |
| current   | `number` | 指定当前步骤，从 0 开始记数。在子 `Step` 元素中，可以通过 status 属性覆盖状态 | 0          |
| direction | `string` | step 样式，可选值为 vertical、horizontal                                      | horizontal |

### Steps externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

### Step props

| 参数      | 类型     | 描述                                                                                                        | 默认值   |
| --------- | -------- | ----------------------------------------------------------------------------------------------------------- | -------- |
| prefixCls | `string` | 自定义类名前缀                                                                                              | wux-step |
| status    | `string` | 指定状态，可选值为 wait、process、finish、error。当不配置该属性时，会使用 `Steps` 的 current 来自动指定状态 | -        |
| title     | `string` | 标题                                                                                                        | -        |
| content   | `string` | 步骤的详情描述                                                                                              | -        |
| icon      | `string` | 步骤图标                                                                                                    | -        |

### Step slot

| 名称    | 描述       |
| ------- | ---------- |
| title   | 自定义标题 |
| content | 自定义描述 |

### Step externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

---
_Source: https://npm.io/package/@wines/step · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._