diff --git a/packages/arcodesign/components/steps/README.en-US.md b/packages/arcodesign/components/steps/README.en-US.md index 4f19fda1..a3a543c1 100644 --- a/packages/arcodesign/components/steps/README.en-US.md +++ b/packages/arcodesign/components/steps/README.en-US.md @@ -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"| diff --git a/packages/arcodesign/components/steps/README.md b/packages/arcodesign/components/steps/README.md index f9aa1b8c..a1ee4dd4 100644 --- a/packages/arcodesign/components/steps/README.md +++ b/packages/arcodesign/components/steps/README.md @@ -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"| diff --git a/packages/arcodesign/components/steps/__ast__/index.ast.json b/packages/arcodesign/components/steps/__ast__/index.ast.json index b62489ab..3424c236 100644 --- a/packages/arcodesign/components/steps/__ast__/index.ast.json +++ b/packages/arcodesign/components/steps/__ast__/index.ast.json @@ -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 )'", diff --git a/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap index fd2dd82e..27fb2bf3 100644 --- a/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap +++ b/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap @@ -1251,6 +1251,269 @@ exports[`steps demo test steps demo: horizontal-spec.md renders correctly 1`] = `; +exports[`steps demo test steps demo: reverse.md renders correctly 1`] = ` + +
+
+
+
+
+ + + + + +
+
+
+ Start +
+
+ Details +
+
+
+
+
+
+ + 2 + +
+
+
+ Step 2 +
+
+ Details +
+
+
+
+
+
+ + 3 + +
+
+
+ Step 3 +
+
+ Details +
+
+
+
+
+
+ + 4 + +
+
+
+ Finish +
+
+ Details +
+
+
+
+
+
+
+
+
+ +
+
+
+ Start +
+
+ Details +
+
+
+
+
+
+ +
+
+
+ Step 2 +
+
+ Details +
+
+
+
+
+
+ +
+
+
+ Step 3 +
+
+ Details +
+
+
+
+
+
+ +
+
+
+ Finish +
+
+ Details +
+
+
+
+
+ +`; + exports[`steps demo test steps demo: vertical.md renders correctly 1`] = `
diff --git a/packages/arcodesign/components/steps/demo/reverse.md b/packages/arcodesign/components/steps/demo/reverse.md new file mode 100644 index 00000000..6fea4f50 --- /dev/null +++ b/packages/arcodesign/components/steps/demo/reverse.md @@ -0,0 +1,34 @@ +## 顺序反转 @en{Reverse Order} + +#### 9 + +```js +import { Steps } from '@arco-design/mobile-react'; + +export default function StepsDemo() { + return ( +
+ + + + + + +
+ + + + + + +
+ ); +} +``` + +```less +.divide { + .rem(height, 8); + .use-var(background, card-background-color); +} +``` diff --git a/packages/arcodesign/components/steps/demo/style/mobile.less b/packages/arcodesign/components/steps/demo/style/mobile.less index a69b8028..44e5a17a 100644 --- a/packages/arcodesign/components/steps/demo/style/mobile.less +++ b/packages/arcodesign/components/steps/demo/style/mobile.less @@ -1,4 +1,4 @@ -@import "../../../../style/mixin.less"; +@import '../../../../style/mixin.less'; #demo-steps { .@{prefix}-steps-item-custom-icon { @@ -9,6 +9,6 @@ } .arcodesign-mobile-demo-content { - padding: 0!important; + padding: 0 !important; } } diff --git a/packages/arcodesign/components/steps/index.tsx b/packages/arcodesign/components/steps/index.tsx index feeed844..2b090a9e 100644 --- a/packages/arcodesign/components/steps/index.tsx +++ b/packages/arcodesign/components/steps/index.tsx @@ -9,7 +9,7 @@ import React, { useState, useEffect, } from 'react'; -import { componentWrapper } from '@arco-design/mobile-utils'; +import { cls, componentWrapper } from '@arco-design/mobile-utils'; import { ContextLayout } from '../context-provider'; import Step from './step'; import { useSystem, useRefState } from '../_helpers'; @@ -18,7 +18,7 @@ import { StepsProps, StepsRef } from './type'; export * from './type'; export const StepsContext = createContext< - Pick & { + Pick & { index?: number; changeIndex: (newIndex: number) => void; } @@ -36,6 +36,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { defaultIndex = 0, status = 'process', items, + reverseOrder = false, onClick, onChange, } = props; @@ -72,6 +73,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { index, status: activeIndex === index ? status : void 0, align, + reverseOrder, changeIndex, }} key={index} @@ -86,7 +88,12 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { {({ prefixCls }) => (
diff --git a/packages/arcodesign/components/steps/style/index.less b/packages/arcodesign/components/steps/style/index.less index 94c14fae..be38e9cc 100644 --- a/packages/arcodesign/components/steps/style/index.less +++ b/packages/arcodesign/components/steps/style/index.less @@ -1,9 +1,13 @@ -@import "../../../style/mixin.less"; +@import '../../../style/mixin.less'; .@{prefix}-steps { display: flex; .use-var(padding, steps-padding); + &.reverse-order { + flex-direction: row-reverse; + } + &-item { position: relative; display: flex; @@ -30,6 +34,20 @@ visibility: hidden; } + &:first-child &-tail::after, + &:last-child &-tail::before { + .reverse-order & { + visibility: hidden; + } + } + + &:first-child &-tail::before, + &:last-child &-tail::after { + .reverse-order & { + visibility: visible; + } + } + &-tail { position: absolute; display: flex; @@ -50,7 +68,7 @@ .use-var(padding, steps-tail-horizontal-padding); &::after { - content: ""; + content: ''; width: 100%; .use-var(border-radius, steps-tail-border-radius); } @@ -59,7 +77,7 @@ &-align-center { &::before, &::after { - content: ""; + content: ''; width: 50%; } &::before { @@ -90,7 +108,7 @@ .use-var(padding, steps-tail-vertical-padding); &::after { - content: ""; + content: ''; height: 100%; .use-var(border-radius, steps-tail-border-radius); } @@ -99,7 +117,7 @@ &-align-center { &::before, &::after { - content: ""; + content: ''; height: 50%; } &::before { @@ -127,6 +145,20 @@ &-align-center&-status-error::before { .use-var(background, steps-tail-finish-background); } + + &-status-finish::before, + &-status-process::after, + &-align-center&-status-error::after { + .reverse-order & { + .use-var(background, steps-tail-finish-background); + } + } + &-status-process::before, + &-align-center&-status-error::before { + .reverse-order & { + .use-var(background, steps-tail-standard-background); + } + } } &-custom-icon, @@ -206,7 +238,6 @@ } &-content { - .horizontal & { .use-var(margin-top, steps-horizontal-content-margin-top); &-align-center { @@ -262,6 +293,10 @@ } &.vertical { + &.reverse-order { + flex-direction: column-reverse; + } + flex-direction: column; .use-var(padding-bottom, steps-vertical-padding-bottom); .use-var-with-rtl(padding-left, steps-vertical-padding-left); diff --git a/packages/arcodesign/components/steps/type.ts b/packages/arcodesign/components/steps/type.ts index 838b8070..aed1b09f 100644 --- a/packages/arcodesign/components/steps/type.ts +++ b/packages/arcodesign/components/steps/type.ts @@ -32,6 +32,11 @@ export interface StepsProps { * @en Custom classname */ className?: string; + /** + * 顺序反转，设置为true后，顺序将从右到左，从下到上 + * @en reverse the order from right to left and from bottom to top + */ + reverseOrder?: boolean; /** * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)' * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)' diff --git a/packages/common-widgets/style/mixin.less b/packages/common-widgets/style/mixin.less index 3ac60ffc..b4838ea6 100644 --- a/packages/common-widgets/style/mixin.less +++ b/packages/common-widgets/style/mixin.less @@ -530,7 +530,7 @@ * } * ``` */ -.set-steps-color(@color, @finish-color: fade(@color, 10%)) { +.set-steps-color(@color, @finish-color: fade(@color, 10%), @reverse: false) { .process-bg-color-with-config, .process-custom-icon-bg-color-with-config { background: @color; @@ -553,8 +553,20 @@ } .finish-tail-color-with-config::before, .finish-tail-color-with-config::after, - .process-tail-color-with-config::before, .error-tail-color-with-config::before { background: @color; } + + & when (@reverse = true) { + .process-tail-color-with-config::after { + background: @color; + } + } + + & when (@reverse = false) { + .process-tail-color-with-config::before { + background: @color; + } + } + }