diff --git a/src/config.json b/src/config.json
index 1d0aefca4bfa263c6acc341876bd19f69b2271f1..b090a82719a093b58bfdd1c7ae35f13de9e3364d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -373,6 +373,24 @@
"sort": 16,
"show": true,
"author": "Drjingfubo"
+ },
+ {
+ "name": "Steps",
+ "sort": 17,
+ "cName": "步骤条",
+ "type": "component",
+ "show": true,
+ "desc": "步骤条",
+ "author": "ailululu"
+ },
+ {
+ "name": "Step",
+ "sort": 17,
+ "cName": "步骤条子组件",
+ "type": "component",
+ "show": false,
+ "desc": "步骤条子组件",
+ "author": "ailululu"
}
]
},
diff --git a/src/packages/step/index.scss b/src/packages/step/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..68a1ecd8cee1c6ce5e8f7a9243de48b49f825a22
--- /dev/null
+++ b/src/packages/step/index.scss
@@ -0,0 +1,200 @@
+.nut-step {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 33.34%;
+ text-align: center;
+ font-size: 0;
+ &-head {
+ position: relative;
+ display: block;
+ margin-bottom: 10px;
+ }
+ &-line {
+ position: absolute;
+ top: 11px;
+ left: 50%;
+ right: -50%;
+ display: inline-block;
+ height: 1px;
+ background: #909ca4;
+ }
+ &-icon {
+ position: relative;
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ line-height: 25px;
+ font-family: PingFangSC-Medium;
+ font-size: 13px;
+ // border-color: #909CA4;
+ z-index: 1;
+ .nut-icon {
+ width: 100%;
+ height: 100%;
+ }
+ &.is-text {
+ border-radius: 50%;
+ border-width: 1px;
+ border-style: solid;
+ }
+ &.is-icon {
+ border-radius: 50%;
+ border-width: 1px;
+ border-style: solid;
+ background-color: transparent;
+ }
+ }
+ &-main {
+ display: inline-block;
+ padding-left: 10%;
+ padding-right: 10%;
+ text-align: center;
+ }
+ &-title {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 14px;
+ color: #909ca4;
+ }
+ &-content {
+ display: block;
+ font-size: 14px;
+ color: #666;
+ }
+ &:last-child {
+ .nut-step-line {
+ display: none;
+ }
+ }
+ &.nut-step-finish {
+ .nut-step-head {
+ color: #3790ff;
+ border-color: #3790ff;
+ }
+ .nut-step-icon.is-text {
+ background-color: #fff;
+ }
+ .nut-step-icon.is-icon {
+ background-color: #fff;
+ }
+ .nut-step-line {
+ background: #3790ff;
+ }
+ .nut-step-title {
+ color: #3790ff;
+ }
+ }
+ &.nut-step-process {
+ .nut-step-head {
+ color: #fff;
+ border-color: #3790ff;
+ }
+ .nut-step-icon.is-text {
+ background-color: #3790ff;
+ }
+ .nut-step-icon.is-icon {
+ background-color: #3790ff;
+ }
+ .nut-step-title {
+ color: #3790ff;
+ }
+ }
+ &.nut-step-wait {
+ .nut-step-head {
+ color: #909ca4;
+ border-color: #909ca4;
+ }
+ .nut-step-icon.is-text {
+ background-color: #fff;
+ }
+ .nut-step-icon.is-icon {
+ background-color: #fff;
+ }
+ .nut-step-content {
+ color: #909ca4;
+ }
+ }
+ &.nut-step-error {
+ .nut-step-head {
+ color: #fff;
+ border-color: #fa2c19;
+ }
+ .nut-step-icon.is-text {
+ background-color: #fa2c19;
+ }
+ .nut-step-icon.is-icon {
+ background-color: #fa2c19;
+ }
+ .nut-step-line {
+ background: #3790ff;
+ }
+ }
+}
+.nut-steps-vertical {
+ .nut-step {
+ display: flex;
+ height: 33.34%;
+ }
+ .nut-step-line {
+ position: absolute;
+ display: inline-block;
+ width: 1px;
+ height: 100%;
+ background: #909ca4;
+ }
+ .nut-step-main {
+ display: inline-block;
+ padding-left: 6%;
+ text-align: left;
+ }
+ &.nut-steps-dot {
+ .nut-step-head {
+ margin-top: 7px;
+ margin-bottom: 0;
+ }
+ .nut-step-line {
+ top: 7px;
+ left: 50%;
+ right: -50%;
+ }
+ .nut-step-icon {
+ width: 8px;
+ height: 8px;
+ background: #3790ff;
+ border-radius: 50%;
+ box-sizing: content-box;
+ }
+ .nut-step-wait {
+ .nut-step-icon {
+ background-color: #959fb1;
+ }
+ .nut-step-content {
+ color: #909ca4;
+ }
+ }
+ .nut-step-finish {
+ .nut-step-icon {
+ background-color: #3790ff;
+ }
+ }
+ .nut-step-process {
+ .nut-step-icon {
+ position: relative;
+ background-color: #3790ff;
+ &:before {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin-left: -7px;
+ margin-top: -7px;
+ width: 14px;
+ height: 14px;
+ background-color: rgba(55, 144, 255, 0.23);
+ border-radius: 50%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/packages/step/index.vue b/src/packages/step/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f08ad45e64c198a12f94ecfcb977b84ec9bf398
--- /dev/null
+++ b/src/packages/step/index.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+ {{ state.index }}
+
+
+
+
+
+ {{ title }}
+
+
+ {{ content }}
+
+
+
+
+
+
+
+
diff --git a/src/packages/steps/demo.vue b/src/packages/steps/demo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8dbc4509666ceed6d9764819621393baef38e653
--- /dev/null
+++ b/src/packages/steps/demo.vue
@@ -0,0 +1,85 @@
+
+
+
基本用法
+
+ 1
+ 2
+ 3
+
+
标题和描述信息
+
+ 1
+ 2
+ 3
+
+
自定义图标
+
+ 1
+ 2
+ 3
+
+
竖向步骤条
+
+
+ 1
+ 2
+ 3
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
diff --git a/src/packages/steps/doc.md b/src/packages/steps/doc.md
new file mode 100644
index 0000000000000000000000000000000000000000..aad87218616c3663df8e5816bee83268f131ec62
--- /dev/null
+++ b/src/packages/steps/doc.md
@@ -0,0 +1,90 @@
+# Steps 步骤条 组件
+
+### 介绍
+
+拆分展示某项流程的步骤,引导用户按流程完成任务或向用户展示当前状态。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Steps } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Steps);
+```
+
+## 代码演示
+
+### 基本用法
+
+```html
+
+ 1
+ 2
+ 3
+
+```
+
+### 标题和描述信息
+
+```html
+
+ 1
+ 2
+ 3
+
+```
+
+### 自定义图标
+
+```html
+
+ 1
+ 2
+ 3
+
+```
+
+### 竖向步骤条
+
+```html
+
+ 1
+ 2
+ 3
+
+```
+
+### 点状步骤和垂直方向
+```html
+
+ 1
+ 2
+ 3
+
+```
+
+
+## API
+
+### Props
+
+#### nut-steps
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
+| direction | 显示方向,`horizontal`,`vertical` | String | horizontal |
+| current | 当前所在的步骤 | Number、String | 0 |
+| progressDot | 点状步骤条 | Boolean | false |
+
+
+
+#### nut-step
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------- | ---------------------- | ------------ | ----------- |
+| title | 流程步骤的标题 | String | 步骤 |
+| content | 流程步骤的描述性文字 | String | 步骤描述 |
+| icon | 图标 | String | - |
+| status | 流程状态 | String | String、Number | "process"(可选值 "wait"、"process"、"finish"、"error" |
\ No newline at end of file
diff --git a/src/packages/steps/index.scss b/src/packages/steps/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f6acc61bd8b552c538b566217841888927c5903a
--- /dev/null
+++ b/src/packages/steps/index.scss
@@ -0,0 +1,7 @@
+.nut-steps {
+ display: flex;
+}
+.nut-steps-vertical {
+ height: 100%;
+ flex-flow: column;
+}
diff --git a/src/packages/steps/index.vue b/src/packages/steps/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0932efc4102e2174dc1802671d431b06b15e30bf
--- /dev/null
+++ b/src/packages/steps/index.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+