Skip to content

Commit

Permalink
feat: Steps support reverse order (#287)
Browse files Browse the repository at this point in the history 
* feat: step support reverse

* feat: less
  • Loading branch information
@shenhaidada
shenhaidada authored Oct 24, 2024
1 parent 06a2153 commit 8ed5614
Show file tree
Hide file tree
Showing 10 changed files with 388 additions and 13 deletions.
1 change: 1 addition & 0 deletions packages/arcodesign/components/steps/README.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ Display the progress of a task, or guide users to complete a complex task.
|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|className|Custom classname|string|-|
|reverseOrder|reverse the order from right to left and from bottom to top|boolean|-|
|style|Custom stylesheet\. If want to use CSS to control icon color, use public mixin '\.set\-steps\-color(|CSSProperties|-|
|direction|Step bar direction|"vertical" \| "horizontal"|horizontal|
|align|Step alignment|"center" \| "start"|"center" when direction="horizontal" and "start" when direction="vertical"|
Expand Down
1 change: 1 addition & 0 deletions packages/arcodesign/components/steps/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
|参数|描述|类型|默认值|
|----------|-------------|------|------|
|className|自定义类名|string|-|
|reverseOrder|顺序反转，设置为true后，顺序将从右到左，从下到上|boolean|-|
|style|自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '\.set\-steps\-color(@color)'|CSSProperties|-|
|direction|步骤条方向|"vertical" \| "horizontal"|horizontal|
|align|步骤条对齐方式|"center" \| "start"|direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"|
Expand Down
17 changes: 17 additions & 0 deletions packages/arcodesign/components/steps/__ast__/index.ast.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,23 @@
"name": "string"
}
},
"reverseOrder": {
"defaultValue": null,
"description": "顺序反转，设置为true后，顺序将从右到左，从下到上\n@en reverse the order from right to left and from bottom to top",
"name": "reverseOrder",
"tags": {
"en": "reverse the order from right to left and from bottom to top"
},
"descWithTags": "顺序反转，设置为true后，顺序将从右到左，从下到上",
"parent": {
"fileName": "arcom-github/packages/arcodesign/components/steps/type.ts",
"name": "StepsProps"
},
"required": false,
"type": {
"name": "boolean"
}
},
"style": {
"defaultValue": null,
"description": "自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'\n@en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(\n@color )'",
Expand Down
263 changes: 263 additions & 0 deletions packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1251,6 +1251,269 @@ exports[`steps demo test steps demo: horizontal-spec.md renders correctly 1`] =
</DocumentFragment>
`;

exports[`steps demo test steps demo: reverse.md renders correctly 1`] = `
<DocumentFragment>
<div>
<div
class="arco-steps all-border-box horizontal pc reverse-order"
>
<div
class="arco-steps-item arco-steps-item-align-center finish horizontal number"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-center finish-tail-color-with-config"
/>
<div
class="arco-steps-item-icon finish-bg-color-with-config"
>
<svg
class="arco-icon arco-icon-check-bold "
height="1em"
viewBox="0 -0.97 10.07 10.07"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g
data-name="图层 2"
>
<path
d="M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z"
data-name="图层 1"
fill="currentColor"
fill-rule="evenodd"
/>
</g>
</svg>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-center"
>
<div
class="arco-steps-item-title finish-title-color-with-config"
>
Start
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-center process horizontal number"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-center process-tail-color-with-config"
/>
<div
class="arco-steps-item-icon process-bg-color-with-config"
>
<span
class="arco-steps-item-icon-num"
>
2
</span>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-center"
>
<div
class="arco-steps-item-title process-title-color-with-config"
>
Step 2
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-center wait horizontal number"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
/>
<div
class="arco-steps-item-icon wait-bg-color-with-config"
>
<span
class="arco-steps-item-icon-num"
>
3
</span>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-center"
>
<div
class="arco-steps-item-title wait-title-color-with-config"
>
Step 3
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-center wait horizontal number"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
/>
<div
class="arco-steps-item-icon wait-bg-color-with-config"
>
<span
class="arco-steps-item-icon-num"
>
4
</span>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-center"
>
<div
class="arco-steps-item-title wait-title-color-with-config"
>
Finish
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
</div>
<div
class="divide"
/>
<div
class="arco-steps all-border-box vertical pc reverse-order"
>
<div
class="arco-steps-item arco-steps-item-align-start finish vertical dot"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-start finish-tail-color-with-config"
/>
<div
class="arco-steps-item-icon finish-bg-color-with-config"
>
<span
class="arco-steps-item-icon-dot"
/>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-start"
>
<div
class="arco-steps-item-title finish-title-color-with-config"
>
Start
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-start process vertical dot"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-start process-tail-color-with-config"
/>
<div
class="arco-steps-item-icon process-bg-color-with-config"
>
<span
class="arco-steps-item-icon-dot"
/>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-start"
>
<div
class="arco-steps-item-title process-title-color-with-config"
>
Step 2
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-start wait vertical dot"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
/>
<div
class="arco-steps-item-icon wait-bg-color-with-config"
>
<span
class="arco-steps-item-icon-dot"
/>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-start"
>
<div
class="arco-steps-item-title wait-title-color-with-config"
>
Step 3
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
<div
class="arco-steps-item arco-steps-item-align-start wait vertical dot"
>
<div
class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
/>
<div
class="arco-steps-item-icon wait-bg-color-with-config"
>
<span
class="arco-steps-item-icon-dot"
/>
</div>
<div
class="arco-steps-item-content arco-steps-item-content-align-start"
>
<div
class="arco-steps-item-title wait-title-color-with-config"
>
Finish
</div>
<div
class="arco-steps-item-description"
>
Details
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;

exports[`steps demo test steps demo: vertical.md renders correctly 1`] = `
<DocumentFragment>
<div>
Expand Down
34 changes: 34 additions & 0 deletions packages/arcodesign/components/steps/demo/reverse.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
## 顺序反转 @en{Reverse Order}

#### 9

```js
import { Steps } from '@arco-design/mobile-react';

export default function StepsDemo() {
return (
<div>
<Steps reverseOrder current={1}>
<Steps.Step title="Start" description="Details" />
<Steps.Step title="Step 2" description="Details" />
<Steps.Step title="Step 3" description="Details" />
<Steps.Step title="Finish" description="Details" />
</Steps>
<div className="divide" />
<Steps reverseOrder current={1} direction="vertical" iconType="dot">
<Steps.Step title="Start" description="Details" />
<Steps.Step title="Step 2" description="Details" />
<Steps.Step title="Step 3" description="Details" />
<Steps.Step title="Finish" description="Details" />
</Steps>
</div>
);
}
```

```less
.divide {
.rem(height, 8);
.use-var(background, card-background-color);
}
```
4 changes: 2 additions & 2 deletions packages/arcodesign/components/steps/demo/style/mobile.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../../../../style/mixin.less";
@import '../../../../style/mixin.less';

#demo-steps {
.@{prefix}-steps-item-custom-icon {
Expand All @@ -9,6 +9,6 @@
}

.arcodesign-mobile-demo-content {
padding: 0!important;
padding: 0 !important;
}
}
Loading

0 comments on commit 8ed5614

Please sign in to comment.