From b1e07eaeee99dc1db43d4e8594388e3b607443f2 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Mon, 19 Aug 2024 13:56:29 +0800 Subject: [PATCH 01/12] chore: save --- scripts/rn/copy-file.js | 1 + src/config.json | 4 +- src/packages/step/step.harmony.css | 46 +++--- src/packages/step/step.scss | 12 +- src/packages/step/step.taro.tsx | 12 +- src/packages/steps/demo.taro.tsx | 14 +- src/packages/steps/demos/taro/demo1.tsx | 8 +- src/packages/steps/demos/taro/demo9.tsx | 6 +- src/packages/steps/steps.harmony.css | 199 ++++++++++++++++++++++++ src/packages/steps/steps.scss | 1 + src/packages/steps/steps.taro.tsx | 5 +- 11 files changed, 264 insertions(+), 44 deletions(-) diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js index 8f56891cb0..6e2fcdfd25 100644 --- a/scripts/rn/copy-file.js +++ b/scripts/rn/copy-file.js @@ -32,6 +32,7 @@ const childAdaptedArray = [ 'hoverbuttonitem', 'avatargroup', 'icon', + 'step' ] // copy文件并增加css引入 diff --git a/src/config.json b/src/config.json index 0f1959164d..ca3fc6bb63 100644 --- a/src/config.json +++ b/src/config.json @@ -1055,7 +1055,7 @@ "author": "ailululu" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Step", "sort": 17, "cName": "步骤条子组件", @@ -1066,7 +1066,7 @@ "author": "swag~jun" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Steps", "type": "component", "cName": "步骤条", diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index d8bfb72a72..5dd6eca65c 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -8,6 +8,7 @@ .nut-step-head { position: relative; display: flex; + flex-direction: row; justify-content: center; margin-bottom: 12px; } @@ -17,19 +18,21 @@ left: calc(50% + (100% - 70%) / 2); height: 1px; width: 70%; - background: #888B94; + background: #888b94; } .nut-step-icon { position: relative; display: flex; + flex-direction: row; align-items: center; justify-content: center; + border-radius: 999vmax; width: 25px; height: 25px; line-height: 25px; font-size: 12px; - background-color: #888B94; - border-color: #888B94; + background-color: #888b94; + border-color: #888b94; color: #ffffff; z-index: 1; } @@ -38,12 +41,12 @@ height: 100%; } .nut-step-icon.is-text { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } .nut-step-icon.is-icon { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } @@ -58,7 +61,7 @@ display: block; margin-bottom: 10px; font-size: 14px; - color: #1A1A1A; + color: #1a1a1a; } .nut-step-description { display: block; @@ -69,34 +72,34 @@ display: none; } .nut-step.nut-step-process .nut-step-icon { - background-color: #FF0F23; - border-color: #FF0F23; + background-color: #ff0f23; + border-color: #ff0f23; color: #ffffff; } .nut-step.nut-step-process .nut-step-title { - color: #FF0F23; + color: #ff0f23; font-size: 14px; - font-weight: 500; + font-weight: 600; } .nut-step.nut-step-process .nut-step-description { color: #505259; } .nut-step.nut-step-wait .nut-step-title { - color: #1A1A1A; + color: #1a1a1a; } .nut-step.nut-step-wait .nut-step-description { color: #505259; } .nut-step.nut-step-finish .nut-step-icon { background-color: #ffffff; - border-color: #FF0F23; - color: #FF0F23; + border-color: #ff0f23; + color: #ff0f23; } .nut-step.nut-step-finish .nut-step-line { - background: #FF0F23; + background: #ff0f23; } .nut-step.nut-step-finish .nut-step-title { - color: #FF0F23; + color: #ff0f23; } .nut-step.nut-step-finish .nut-step-description { color: #505259; @@ -112,15 +115,15 @@ width: 6px; height: 6px; border: 2px solid #ffffff; - border-radius: 50%; + border-radius: 999vmax; box-sizing: content-box; } .nut-steps-dot .nut-step-wait .nut-step-icon { - background-color: #888B94; + background-color: #888b94; } .nut-steps-dot .nut-step-finish .nut-step-icon { background-color: #ffffff; - border-color: #FF0F23; + border-color: #ff0f23; } .nut-steps-dot .nut-step-process .nut-step-icon { position: relative; @@ -135,8 +138,8 @@ margin-top: -7px; width: 14px; height: 14px; - background-color: #FF0F23; - border-radius: 50%; + background-color: #ff0f23; + border-radius: 999vmax; opacity: 0.23; } @@ -147,6 +150,7 @@ .nut-steps-vertical .nut-step { display: flex; + flex-direction: row; height: 33.34%; } .nut-steps-vertical .nut-step-line { @@ -154,7 +158,7 @@ display: inline-block; width: 1px; height: 70%; - background: #888B94; + background: #888b94; top: calc(25px + (100% - 70% - 12px) / 2); left: calc(50% - 1px); } diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 2dd2cfca02..c87aa6fc7f 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -8,6 +8,7 @@ &-head { position: relative; display: flex; + flex-direction: row; justify-content: center; margin-bottom: $steps-base-icon-margin-bottom; } @@ -26,8 +27,10 @@ &-icon { position: relative; display: flex; + flex-direction: row; align-items: center; justify-content: center; + border-radius: 999vmax; width: $steps-base-icon-width; height: $steps-base-icon-height; line-height: $steps-base-icon-line-height; @@ -43,13 +46,13 @@ } &.is-text { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } &.is-icon { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } @@ -144,7 +147,7 @@ width: $steps-dot-icon-width; height: $steps-dot-icon-height; border: $steps-dot-icon-border; - border-radius: 50%; + border-radius: 999vmax; box-sizing: content-box; } @@ -176,7 +179,7 @@ width: 14px; height: 14px; background-color: $steps-process-icon-before-bg-color; - border-radius: 50%; + border-radius: 999vmax; opacity: 0.23; } } @@ -195,6 +198,7 @@ .nut-steps-vertical { .nut-step { display: flex; + flex-direction: row; height: 33.34%; } diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 5a3f0ec238..4881095dae 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent, ReactNode, useContext } from 'react' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import { DataContext } from '@/packages/steps/context' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -57,22 +57,22 @@ export const Step: FunctionComponent< return `${classPrefix}-icon` } return ( -
+ - {icon || (!dot && {value})} + {icon || (!dot && {value})} {(title || description) && ( - {title} + {title} {description && ( - {description} + {description} )} )} -
+ ) } diff --git a/src/packages/steps/demo.taro.tsx b/src/packages/steps/demo.taro.tsx index 9347eaae0a..4e30a8b728 100644 --- a/src/packages/steps/demo.taro.tsx +++ b/src/packages/steps/demo.taro.tsx @@ -12,6 +12,7 @@ import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' import Demo9 from './demos/taro/demo9' +import { harmonyAndRn } from '@/utils/platform-taro' const StepsDemo = () => { const [translated] = useTranslate({ @@ -72,11 +73,14 @@ const StepsDemo = () => { {translated.customDot} - {translated.customBoth} - - - {translated.customIcon} - + {!harmonyAndRn() && ( + <> + {translated.customBoth} + + {translated.customIcon} + + + )} {translated.vertical} diff --git a/src/packages/steps/demos/taro/demo1.tsx b/src/packages/steps/demos/taro/demo1.tsx index 57e1658214..00364d384e 100644 --- a/src/packages/steps/demos/taro/demo1.tsx +++ b/src/packages/steps/demos/taro/demo1.tsx @@ -15,7 +15,13 @@ const Demo1 = () => { - + diff --git a/src/packages/steps/demos/taro/demo9.tsx b/src/packages/steps/demos/taro/demo9.tsx index d63606e05a..33fe9e5dc9 100644 --- a/src/packages/steps/demos/taro/demo9.tsx +++ b/src/packages/steps/demos/taro/demo9.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { View } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import { Steps, Step } from '@nutui/nutui-react-taro' const Demo9 = () => { @@ -17,8 +17,8 @@ const Demo9 = () => { title="未开始" description={ <> -

收货地址为：

-

北京市经济技术开发区科创十一街18号院京东大厦

+ 收货地址为： + 北京市经济技术开发区科创十一街18号院京东大厦 } /> diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css index bb64553555..122c73dfd7 100644 --- a/src/packages/steps/steps.harmony.css +++ b/src/packages/steps/steps.harmony.css @@ -1,5 +1,204 @@ +.nut-step { + flex-grow: 0; + flex-shrink: 0; + flex: 1; + text-align: center; + font-size: 0; +} +.nut-step-head { + position: relative; + display: flex; + justify-content: center; + margin-bottom: 12px; +} +.nut-step-line { + position: absolute; + top: calc(25px / 2); + left: calc(50% + (100% - 70%) / 2); + height: 1px; + width: 70%; + background: #888b94; +} +.nut-step-icon { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 25px; + height: 25px; + line-height: 25px; + font-size: 12px; + background-color: #888b94; + border-color: #888b94; + color: #ffffff; + z-index: 1; +} +.nut-step-icon .nut-icon { + width: 100%; + height: 100%; +} +.nut-step-icon.is-text { + border-radius: 50%; + border-width: 1px; + border-style: solid; +} +.nut-step-icon.is-icon { + border-radius: 50%; + border-width: 1px; + border-style: solid; +} +.nut-step-main { + padding: 0 10%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.nut-step-title { + display: block; + margin-bottom: 10px; + font-size: 14px; + color: #1a1a1a; +} +.nut-step-description { + display: block; + font-size: 12px; + color: #505259; +} +.nut-step:last-child .nut-step-line { + display: none; +} +.nut-step.nut-step-process .nut-step-icon { + background-color: #ff0f23; + border-color: #ff0f23; + color: #ffffff; +} +.nut-step.nut-step-process .nut-step-title { + color: #ff0f23; + font-size: 14px; + font-weight: 600; +} +.nut-step.nut-step-process .nut-step-description { + color: #505259; +} +.nut-step.nut-step-wait .nut-step-title { + color: #1a1a1a; +} +.nut-step.nut-step-wait .nut-step-description { + color: #505259; +} +.nut-step.nut-step-finish .nut-step-icon { + background-color: #ffffff; + border-color: #ff0f23; + color: #ff0f23; +} +.nut-step.nut-step-finish .nut-step-line { + background: #ff0f23; +} +.nut-step.nut-step-finish .nut-step-title { + color: #ff0f23; +} +.nut-step.nut-step-finish .nut-step-description { + color: #505259; +} + +.nut-steps-dot .nut-step-head { + margin: 10px 0; +} +.nut-steps-dot .nut-step-line { + top: 7px; +} +.nut-steps-dot .nut-step-icon { + width: 6px; + height: 6px; + border: 2px solid #ffffff; + border-radius: 50%; + box-sizing: content-box; +} +.nut-steps-dot .nut-step-wait .nut-step-icon { + background-color: #888b94; +} +.nut-steps-dot .nut-step-finish .nut-step-icon { + background-color: #ffffff; + border-color: #ff0f23; +} +.nut-steps-dot .nut-step-process .nut-step-icon { + position: relative; +} +.nut-steps-dot .nut-step-process .nut-step-icon:before { + content: ""; + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + margin-left: -7px; + margin-top: -7px; + width: 14px; + height: 14px; + background-color: #ff0f23; + border-radius: 50%; + opacity: 0.23; +} + +.nut-steps-horizontal.nut-steps-dot .nut-step-line { + top: 50%; + bottom: -50%; +} + +.nut-steps-vertical .nut-step { + display: flex; + height: 33.34%; +} +.nut-steps-vertical .nut-step-line { + position: absolute; + display: inline-block; + width: 1px; + height: 70%; + background: #888b94; + top: calc(25px + (100% - 70% - 12px) / 2); + left: calc(50% - 1px); +} +.nut-steps-vertical.nut-steps-dot .nut-step-line { + top: calc(6px + (100% - 70%) / 2); +} +.nut-steps-vertical .nut-step-main { + display: inline-block; + padding-left: 6%; + text-align: start; +} + +[dir=rtl] .nut-step-line { + left: auto; + right: calc(50% + (100% - 70%) / 2); +} + +.nut-rtl .nut-step-line { + left: auto; + right: calc(50% + (100% - 70%) / 2); +} + +[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before, +.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before { + left: auto; + right: 50%; + margin-left: 0; + margin-right: -7px; +} + +[dir=rtl] .nut-steps-vertical .nut-step-line, +.nut-rtl .nut-steps-vertical .nut-step-line { + left: auto; + right: calc(50% - 1px); +} +[dir=rtl] .nut-steps-vertical .nut-step-main, +.nut-rtl .nut-steps-vertical .nut-step-main { + padding-left: 0; + padding-right: 6%; +} + .nut-steps { display: flex; + flex-direction: row; } .nut-steps-vertical { diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 865cb7d1b9..72d784d16e 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -2,6 +2,7 @@ .nut-steps { display: flex; + flex-direction: row; } .nut-steps-vertical { diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx index e57debb2ca..a9a10e82bf 100644 --- a/src/packages/steps/steps.taro.tsx +++ b/src/packages/steps/steps.taro.tsx @@ -1,5 +1,6 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' +import { View } from '@tarojs/components' import { DataContext } from './context' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -46,9 +47,9 @@ export const Steps: FunctionComponent< ) return ( -
+ {children} -
+ ) } From bf8aec458c8cf9534fe335d75735aa822542e0ff Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Mon, 19 Aug 2024 15:26:50 +0800 Subject: [PATCH 02/12] chore: save --- src/packages/step/step.harmony.css | 11 +++++----- src/packages/step/step.scss | 10 +++------ src/packages/step/step.taro.tsx | 29 ++++++++++++++++++++----- src/packages/steps/demos/taro/demo2.tsx | 8 ++++++- src/packages/steps/demos/taro/demo3.tsx | 8 ++++++- src/packages/steps/demos/taro/demo4.tsx | 8 ++++++- src/packages/steps/demos/taro/demo5.tsx | 8 ++++++- 7 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 5dd6eca65c..77e5421d92 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -10,15 +10,14 @@ display: flex; flex-direction: row; justify-content: center; + align-items: center; margin-bottom: 12px; } .nut-step-line { position: absolute; - top: calc(25px / 2); - left: calc(50% + (100% - 70%) / 2); height: 1px; width: 70%; - background: #888b94; + background-color: #888b94; } .nut-step-icon { position: relative; @@ -71,17 +70,17 @@ .nut-step:last-child .nut-step-line { display: none; } -.nut-step.nut-step-process .nut-step-icon { +.nut-step-process .nut-step-icon { background-color: #ff0f23; border-color: #ff0f23; color: #ffffff; } -.nut-step.nut-step-process .nut-step-title { +.nut-step-process .nut-step-title { color: #ff0f23; font-size: 14px; font-weight: 600; } -.nut-step.nut-step-process .nut-step-description { +.nut-step-process .nut-step-description { color: #505259; } .nut-step.nut-step-wait .nut-step-title { diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index c87aa6fc7f..120dd52ca6 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -4,24 +4,20 @@ flex: 1; text-align: center; font-size: 0; - &-head { position: relative; display: flex; flex-direction: row; justify-content: center; + align-items: center; margin-bottom: $steps-base-icon-margin-bottom; } - // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2) - // 如 width=70%时，left=65%; width=100%,left=50%; &-line { position: absolute; - top: calc($steps-base-icon-height / 2); - left: calc(50% + (100% - $steps-base-line-width) / 2); height: $steps-base-line-height; width: $steps-base-line-width; - background: $steps-base-line-background; + background-color: $steps-base-line-background; } &-icon { @@ -85,7 +81,7 @@ } } - &.nut-step-process { + &-process { .nut-step-icon { background-color: $steps-process-icon-bg-color; border-color: $steps-process-icon-bg-color; diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 4881095dae..241299c414 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -9,6 +9,7 @@ export interface StepProps extends BasicComponent { description: ReactNode value: number icon: ReactNode + lineWidth: 70 } const defaultProps = { @@ -17,15 +18,24 @@ const defaultProps = { description: '', value: 0, icon: null, + lineWidth: 70, } as StepProps export const Step: FunctionComponent< Partial & Omit, 'title'> > = (props) => { - const { children, title, description, value, icon, className, ...restProps } = - { - ...defaultProps, - ...props, - } + const { + children, + title, + description, + value, + icon, + className, + lineWidth, + ...restProps + } = { + ...defaultProps, + ...props, + } const parent: any = useContext(DataContext) const dot = parent.propSteps.dot @@ -56,13 +66,20 @@ export const Step: FunctionComponent< } return `${classPrefix}-icon` } + const renderLineStyle = () => { + const isLastItem = + parent.propSteps.children[parent.propSteps.children.length - 1].props + .value === value + const leftPosition = 100 - lineWidth / 2 + return isLastItem ? { display: 'none' } : { left: `${leftPosition}%` } + } return ( - {icon || (!dot && {value})} + {(title || description) && ( diff --git a/src/packages/steps/demos/taro/demo2.tsx b/src/packages/steps/demos/taro/demo2.tsx index 6abe2f51cf..171ecd9ea2 100644 --- a/src/packages/steps/demos/taro/demo2.tsx +++ b/src/packages/steps/demos/taro/demo2.tsx @@ -18,7 +18,13 @@ const Demo2 = () => { - + diff --git a/src/packages/steps/demos/taro/demo3.tsx b/src/packages/steps/demos/taro/demo3.tsx index efbd5feaa6..ba2197da8e 100644 --- a/src/packages/steps/demos/taro/demo3.tsx +++ b/src/packages/steps/demos/taro/demo3.tsx @@ -15,7 +15,13 @@ const Demo3 = () => { - + diff --git a/src/packages/steps/demos/taro/demo4.tsx b/src/packages/steps/demos/taro/demo4.tsx index 83141e6160..16cbc765aa 100644 --- a/src/packages/steps/demos/taro/demo4.tsx +++ b/src/packages/steps/demos/taro/demo4.tsx @@ -29,7 +29,13 @@ const Demo4 = () => { - + diff --git a/src/packages/steps/demos/taro/demo5.tsx b/src/packages/steps/demos/taro/demo5.tsx index 2e67175886..ea14c00a09 100644 --- a/src/packages/steps/demos/taro/demo5.tsx +++ b/src/packages/steps/demos/taro/demo5.tsx @@ -21,7 +21,13 @@ const Demo5 = () => { - + From 8fd8c3ed12a9e16b8ffbd003dc356522c63938ab Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Mon, 19 Aug 2024 18:25:27 +0800 Subject: [PATCH 03/12] chore: save --- src/packages/step/step.harmony.css | 31 +++++----- src/packages/step/step.scss | 81 ++++++++++--------------- src/packages/step/step.taro.tsx | 32 +++++++--- src/packages/steps/demos/taro/demo1.tsx | 20 ++---- src/packages/steps/demos/taro/demo2.tsx | 24 ++------ src/packages/steps/demos/taro/demo3.tsx | 19 +----- src/packages/steps/demos/taro/demo4.tsx | 20 ++---- src/packages/steps/demos/taro/demo5.tsx | 19 +----- src/packages/steps/steps.taro.tsx | 2 +- 9 files changed, 92 insertions(+), 156 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 77e5421d92..40c38d0f74 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -67,40 +67,41 @@ font-size: 12px; color: #505259; } -.nut-step:last-child .nut-step-line { - display: none; -} -.nut-step-process .nut-step-icon { +.nut-step-process-icon { background-color: #ff0f23; border-color: #ff0f23; color: #ffffff; } -.nut-step-process .nut-step-title { +.nut-step-process-title { color: #ff0f23; font-size: 14px; font-weight: 600; } -.nut-step-process .nut-step-description { +.nut-step-process-inner { + color: #ffffff; +} +.nut-step-process-description { color: #505259; } -.nut-step.nut-step-wait .nut-step-title { - color: #1a1a1a; +.nut-step-finish-inner { + color: #ff0f23; } -.nut-step.nut-step-wait .nut-step-description { +.nut-step-finish-description { color: #505259; } -.nut-step.nut-step-finish .nut-step-icon { +.nut-step-finish-icon { + border-width: 1px; background-color: #ffffff; border-color: #ff0f23; color: #ff0f23; } -.nut-step.nut-step-finish .nut-step-line { - background: #ff0f23; +.nut-step-finish-line { + background-color: #ff0f23; } -.nut-step.nut-step-finish .nut-step-title { - color: #ff0f23; +.nut-step-wait-inner { + color: #1a1a1a; } -.nut-step.nut-step-finish .nut-step-description { +.nut-step-wait-description { color: #505259; } diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 120dd52ca6..4ab0f984ca 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -75,58 +75,43 @@ color: $steps-base-description-color; } - &:last-child { - .nut-step-line { - display: none; - } + &-process-icon { + background-color: $steps-process-icon-bg-color; + border-color: $steps-process-icon-bg-color; + color: $steps-process-icon-color; } - - &-process { - .nut-step-icon { - background-color: $steps-process-icon-bg-color; - border-color: $steps-process-icon-bg-color; - color: $steps-process-icon-color; - } - - .nut-step-title { - color: $steps-process-title-color; - font-size: $steps-process-title-font-size; - font-weight: $steps-process-title-font-weight; - } - - .nut-step-description { - color: $steps-process-description-color; - } + &-process-title { + color: $steps-process-title-color; + font-size: $steps-process-title-font-size; + font-weight: $steps-process-title-font-weight; } - - &.nut-step-wait { - .nut-step-title { - color: $steps-wait-title-color; - } - - .nut-step-description { - color: $steps-wait-description-color; - } + &-process-inner { + color: $steps-process-icon-color; + } + &-process-description { + color: $steps-process-description-color; } - &.nut-step-finish { - .nut-step-icon { - background-color: $steps-finish-icon-bg-color; - border-color: $steps-finish-icon-border-color; - color: $steps-finish-icon-color; - } - - .nut-step-line { - background: $steps-finish-line-background; - } - - .nut-step-title { - color: $steps-finish-title-color; - } - - .nut-step-description { - color: $steps-finish-description-color; - } + &-finish-inner { + color: $steps-finish-title-color; + } + &-finish-description { + color: $steps-finish-description-color; + } + &-finish-icon { + border-width: 1px; + background-color: $steps-finish-icon-bg-color; + border-color: $steps-finish-icon-border-color; + color: $steps-finish-icon-color; + } + &-finish-line { + background-color: $steps-finish-line-background; + } + &-wait-inner { + color: $steps-wait-title-color; + } + &-wait-description { + color: $steps-wait-description-color; } } diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 241299c414..f277633f4a 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -51,9 +51,7 @@ export const Step: FunctionComponent< const classPrefix = `nut-step` const classes = classNames( classPrefix, - { - [`${classPrefix}-${getCurrentStatus()}`]: true, - }, + `${classPrefix}-${getCurrentStatus()}`, className ) @@ -76,16 +74,34 @@ export const Step: FunctionComponent< return ( - - {icon || (!dot && {value})} + + {icon || + (!dot && ( + + {value} + + ))} - + {(title || description) && ( - {title} + + {title} + {description && ( - {description} + + {description} + )} )} diff --git a/src/packages/steps/demos/taro/demo1.tsx b/src/packages/steps/demos/taro/demo1.tsx index 00364d384e..04bb8a9e3c 100644 --- a/src/packages/steps/demos/taro/demo1.tsx +++ b/src/packages/steps/demos/taro/demo1.tsx @@ -1,13 +1,8 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' import { Steps, Step, Button } from '@nutui/nutui-react-taro' const Demo1 = () => { const [val, setVal] = useState(1) - const handleStep = () => { - const newVal = (val % 3) + 1 - setVal(newVal) - } return ( <> @@ -15,17 +10,10 @@ const Demo1 = () => { - - - + + ) } diff --git a/src/packages/steps/demos/taro/demo2.tsx b/src/packages/steps/demos/taro/demo2.tsx index 171ecd9ea2..c5b60478b1 100644 --- a/src/packages/steps/demos/taro/demo2.tsx +++ b/src/packages/steps/demos/taro/demo2.tsx @@ -1,34 +1,18 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' import { Steps, Step, Button } from '@nutui/nutui-react-taro' const Demo2 = () => { const [val, setVal] = useState(1) - const handleStep = () => { - const newVal = (val % 3) + 1 - setVal(newVal) - } - const handleClickStep = (value: number) => { - console.log(value) - } return ( <> - + setVal((val % 3) + 1)}> - - - + ) } diff --git a/src/packages/steps/demos/taro/demo3.tsx b/src/packages/steps/demos/taro/demo3.tsx index ba2197da8e..2163645bfa 100644 --- a/src/packages/steps/demos/taro/demo3.tsx +++ b/src/packages/steps/demos/taro/demo3.tsx @@ -1,13 +1,8 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' import { Steps, Step, Button } from '@nutui/nutui-react-taro' const Demo3 = () => { const [val, setVal] = useState(1) - const handleStep = () => { - const newVal = (val % 3) + 1 - setVal(newVal) - } return ( <> @@ -15,17 +10,9 @@ const Demo3 = () => { - - - + ) } diff --git a/src/packages/steps/demos/taro/demo4.tsx b/src/packages/steps/demos/taro/demo4.tsx index 16cbc765aa..e4e7626538 100644 --- a/src/packages/steps/demos/taro/demo4.tsx +++ b/src/packages/steps/demos/taro/demo4.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro' const customTheme = { @@ -16,10 +15,6 @@ const customTheme = { const Demo4 = () => { const [val, setVal] = useState(1) - const handleStep = () => { - const newVal = (val % 3) + 1 - setVal(newVal) - } return ( <> @@ -29,17 +24,10 @@ const Demo4 = () => { - - - + + ) } diff --git a/src/packages/steps/demos/taro/demo5.tsx b/src/packages/steps/demos/taro/demo5.tsx index ea14c00a09..54074b1253 100644 --- a/src/packages/steps/demos/taro/demo5.tsx +++ b/src/packages/steps/demos/taro/demo5.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro' const customTheme = { @@ -8,10 +7,6 @@ const customTheme = { const Demo5 = () => { const [val, setVal] = useState(1) - const handleStep = () => { - const newVal = (val % 3) + 1 - setVal(newVal) - } return ( <> @@ -21,17 +16,9 @@ const Demo5 = () => { - - - + ) } diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx index a9a10e82bf..a7cab3eeb4 100644 --- a/src/packages/steps/steps.taro.tsx +++ b/src/packages/steps/steps.taro.tsx @@ -41,7 +41,7 @@ export const Steps: FunctionComponent< classPrefix, { [`${classPrefix}-${direction}`]: true, - [`${classPrefix}-dot`]: !!dot, + [`${classPrefix}-dot`]: dot, }, className ) From b15c58df631c85802ebe3a8d794ecf20d6a362dd Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Mon, 19 Aug 2024 21:02:20 +0800 Subject: [PATCH 04/12] chore: save --- src/packages/step/step.harmony.css | 2 +- src/packages/step/step.scss | 2 +- src/packages/steps/steps.harmony.css | 48 +++++++++++++++------------- 3 files changed, 28 insertions(+), 24 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 40c38d0f74..2a682ecfb4 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -99,7 +99,7 @@ background-color: #ff0f23; } .nut-step-wait-inner { - color: #1a1a1a; + color: #ffffff; } .nut-step-wait-description { color: #505259; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 4ab0f984ca..e3548f56c6 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -108,7 +108,7 @@ background-color: $steps-finish-line-background; } &-wait-inner { - color: $steps-wait-title-color; + color: $steps-wait-icon-color; } &-wait-description { color: $steps-wait-description-color; diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css index 122c73dfd7..706da700a5 100644 --- a/src/packages/steps/steps.harmony.css +++ b/src/packages/steps/steps.harmony.css @@ -8,22 +8,24 @@ .nut-step-head { position: relative; display: flex; + flex-direction: row; justify-content: center; + align-items: center; margin-bottom: 12px; } .nut-step-line { position: absolute; - top: calc(25px / 2); - left: calc(50% + (100% - 70%) / 2); height: 1px; width: 70%; - background: #888b94; + background-color: #888b94; } .nut-step-icon { position: relative; display: flex; + flex-direction: row; align-items: center; justify-content: center; + border-radius: 999vmax; width: 25px; height: 25px; line-height: 25px; @@ -38,12 +40,12 @@ height: 100%; } .nut-step-icon.is-text { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } .nut-step-icon.is-icon { - border-radius: 50%; + border-radius: 999vmax; border-width: 1px; border-style: solid; } @@ -65,40 +67,41 @@ font-size: 12px; color: #505259; } -.nut-step:last-child .nut-step-line { - display: none; -} -.nut-step.nut-step-process .nut-step-icon { +.nut-step-process-icon { background-color: #ff0f23; border-color: #ff0f23; color: #ffffff; } -.nut-step.nut-step-process .nut-step-title { +.nut-step-process-title { color: #ff0f23; font-size: 14px; font-weight: 600; } -.nut-step.nut-step-process .nut-step-description { +.nut-step-process-inner { + color: #ffffff; +} +.nut-step-process-description { color: #505259; } -.nut-step.nut-step-wait .nut-step-title { - color: #1a1a1a; +.nut-step-finish-inner { + color: #ff0f23; } -.nut-step.nut-step-wait .nut-step-description { +.nut-step-finish-description { color: #505259; } -.nut-step.nut-step-finish .nut-step-icon { +.nut-step-finish-icon { + border-width: 1px; background-color: #ffffff; border-color: #ff0f23; color: #ff0f23; } -.nut-step.nut-step-finish .nut-step-line { - background: #ff0f23; +.nut-step-finish-line { + background-color: #ff0f23; } -.nut-step.nut-step-finish .nut-step-title { - color: #ff0f23; +.nut-step-wait-inner { + color: #1a1a1a; } -.nut-step.nut-step-finish .nut-step-description { +.nut-step-wait-description { color: #505259; } @@ -112,7 +115,7 @@ width: 6px; height: 6px; border: 2px solid #ffffff; - border-radius: 50%; + border-radius: 999vmax; box-sizing: content-box; } .nut-steps-dot .nut-step-wait .nut-step-icon { @@ -136,7 +139,7 @@ width: 14px; height: 14px; background-color: #ff0f23; - border-radius: 50%; + border-radius: 999vmax; opacity: 0.23; } @@ -147,6 +150,7 @@ .nut-steps-vertical .nut-step { display: flex; + flex-direction: row; height: 33.34%; } .nut-steps-vertical .nut-step-line { From b0e6779342a251a746dafb611618f7745ed909fb Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 20 Aug 2024 10:27:34 +0800 Subject: [PATCH 05/12] fix: save --- src/packages/steps/steps.taro.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx index a7cab3eeb4..8b9cd49c07 100644 --- a/src/packages/steps/steps.taro.tsx +++ b/src/packages/steps/steps.taro.tsx @@ -46,11 +46,13 @@ export const Steps: FunctionComponent< className ) return ( - - - {children} - - + + + + {children} + + + ) } From 96130ec584de5fd595b022799e75c7038b019a48 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 20 Aug 2024 15:18:54 +0800 Subject: [PATCH 06/12] chore: save --- src/packages/step/step.harmony.css | 24 +++++------ src/packages/step/step.scss | 66 +++++++++++------------------- src/packages/step/step.taro.tsx | 25 +++++++++-- 3 files changed, 56 insertions(+), 59 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 2a682ecfb4..c110aa37f2 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -104,38 +104,34 @@ .nut-step-wait-description { color: #505259; } - -.nut-steps-dot .nut-step-head { - margin: 10px 0; -} -.nut-steps-dot .nut-step-line { - top: 7px; -} -.nut-steps-dot .nut-step-icon { +.nut-step-dot-icon { width: 6px; height: 6px; border: 2px solid #ffffff; border-radius: 999vmax; box-sizing: content-box; } -.nut-steps-dot .nut-step-wait .nut-step-icon { +.nut-step-dot-wait-icon { background-color: #888b94; } -.nut-steps-dot .nut-step-finish .nut-step-icon { +.nut-step-dot-finish-icon { background-color: #ffffff; border-color: #ff0f23; } -.nut-steps-dot .nut-step-process .nut-step-icon { +.nut-step-dot-process-icon { position: relative; } -.nut-steps-dot .nut-step-process .nut-step-icon:before { +.nut-step-dot-process-icon::before { content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; + transform: translate(-50%, -50%); + /* #ifdef harmony*/ + top: 3px; + left: 3px; + /* #endif */ width: 14px; height: 14px; background-color: #ff0f23; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index e3548f56c6..a47de3a980 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -113,56 +113,38 @@ &-wait-description { color: $steps-wait-description-color; } -} - -.nut-steps-dot { - .nut-step-head { - margin: $steps-dot-head-margin; - } - - .nut-step-line { - top: 7px; - } - - .nut-step-icon { + &-dot-icon { width: $steps-dot-icon-width; height: $steps-dot-icon-height; border: $steps-dot-icon-border; border-radius: 999vmax; box-sizing: content-box; } - - .nut-step-wait { - .nut-step-icon { - background-color: $steps-dot-wait-icon-bg-color; - } + &-dot-wait-icon { + background-color: $steps-dot-wait-icon-bg-color; } - - .nut-step-finish { - .nut-step-icon { - background-color: $steps-dot-finish-icon-bg-color; - border-color: $steps-dot-finish-icon-border-color; - } + &-dot-finish-icon { + background-color: $steps-dot-finish-icon-bg-color; + border-color: $steps-dot-finish-icon-border-color; } - - .nut-step-process { - .nut-step-icon { - position: relative; - - &:before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; - background-color: $steps-process-icon-before-bg-color; - border-radius: 999vmax; - opacity: 0.23; - } + &-dot-process-icon { + position: relative; + &::before { + content: ''; + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + /* #ifdef harmony*/ + top: 3px; + left: 3px; + /* #endif */ + width: 14px; + height: 14px; + background-color: $steps-process-icon-before-bg-color; + border-radius: 999vmax; + opacity: 0.23; } } } diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index f277633f4a..266b6da748 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -3,6 +3,8 @@ import classNames from 'classnames' import { View, Text } from '@tarojs/components' import { DataContext } from '@/packages/steps/context' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { harmony } from '@/utils/platform-taro' +import pxTransform from '@/utils/px-transform' export interface StepProps extends BasicComponent { title: ReactNode @@ -62,20 +64,37 @@ export const Step: FunctionComponent< if (!dot && !icon) { return `${classPrefix}-icon is-text` } - return `${classPrefix}-icon` + return `${classPrefix}-icon ${classPrefix}-dot-icon` } const renderLineStyle = () => { const isLastItem = parent.propSteps.children[parent.propSteps.children.length - 1].props .value === value const leftPosition = 100 - lineWidth / 2 - return isLastItem ? { display: 'none' } : { left: `${leftPosition}%` } + if (isLastItem) { + return { display: 'none' } + } + if (harmony()) { + return { + left: `${leftPosition}%`, + top: pxTransform(dot ? 3 : 12.5), + } + } + return { + left: `${leftPosition}%`, + } } return ( {icon || (!dot && ( From eb34068ef772d972466d3438b530b9291d05e278 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 20 Aug 2024 17:05:02 +0800 Subject: [PATCH 07/12] chore: save --- src/packages/step/step.harmony.css | 4 +++ src/packages/step/step.scss | 4 +++ src/packages/step/step.taro.tsx | 10 +++++--- src/packages/steps/demo.taro.tsx | 11 ++++----- src/packages/steps/demos/taro/demo6.tsx | 2 +- src/packages/steps/steps.harmony.css | 33 +++++++++++++------------ src/packages/steps/steps.scss | 3 ++- 7 files changed, 39 insertions(+), 28 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index c110aa37f2..a7a5c85ced 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -18,6 +18,7 @@ height: 1px; width: 70%; background-color: #888b94; + left: calc(100% - 70% / 2); } .nut-step-icon { position: relative; @@ -89,6 +90,9 @@ .nut-step-finish-description { color: #505259; } +.nut-step-finish-title { + color: #ff0f23; +} .nut-step-finish-icon { border-width: 1px; background-color: #ffffff; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index a47de3a980..96d03adfcc 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -18,6 +18,7 @@ height: $steps-base-line-height; width: $steps-base-line-width; background-color: $steps-base-line-background; + left: calc(100% - $steps-base-line-width / 2); } &-icon { @@ -98,6 +99,9 @@ &-finish-description { color: $steps-finish-description-color; } + &-finish-title { + color: $steps-finish-icon-color; + } &-finish-icon { border-width: 1px; background-color: $steps-finish-icon-bg-color; diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 266b6da748..5022a9d086 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames' import { View, Text } from '@tarojs/components' import { DataContext } from '@/packages/steps/context' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { harmony } from '@/utils/platform-taro' +import { harmony, rn } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' export interface StepProps extends BasicComponent { @@ -11,7 +11,7 @@ export interface StepProps extends BasicComponent { description: ReactNode value: number icon: ReactNode - lineWidth: 70 + lineWidth: number } const defaultProps = { @@ -80,8 +80,10 @@ export const Step: FunctionComponent< top: pxTransform(dot ? 3 : 12.5), } } - return { - left: `${leftPosition}%`, + if (rn()) { + return { + left: `${leftPosition}%`, + } } } return ( diff --git a/src/packages/steps/demo.taro.tsx b/src/packages/steps/demo.taro.tsx index 4e30a8b728..84dc27f4e9 100644 --- a/src/packages/steps/demo.taro.tsx +++ b/src/packages/steps/demo.taro.tsx @@ -67,14 +67,13 @@ const StepsDemo = () => { {translated.info} - {translated.custom} - - - {translated.customDot} - - {!harmonyAndRn() && ( <> + {translated.custom} + + + {translated.customDot} + {translated.customBoth} {translated.customIcon} diff --git a/src/packages/steps/demos/taro/demo6.tsx b/src/packages/steps/demos/taro/demo6.tsx index 9585f0d8a8..a4a7ea4f3c 100644 --- a/src/packages/steps/demos/taro/demo6.tsx +++ b/src/packages/steps/demos/taro/demo6.tsx @@ -8,7 +8,7 @@ const customTheme = { nutuiStepsDotIconBorder: '0', nutuiStepsBaseIconWidth: '6px', nutuiStepsBaseIconHeight: '6px', - nutuiStepsBaseLineBackground: `#ddd`, + nutuiStepsBaseLineBackground: `black`, nutuiStepsFinishIconBgColor: 'black', nutuiStepsFinishIconColor: 'black', nutuiStepsProcessIconBgColor: 'white', diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css index 706da700a5..1693cab8df 100644 --- a/src/packages/steps/steps.harmony.css +++ b/src/packages/steps/steps.harmony.css @@ -18,6 +18,7 @@ height: 1px; width: 70%; background-color: #888b94; + left: calc(100% - 70% / 2); } .nut-step-icon { position: relative; @@ -89,6 +90,9 @@ .nut-step-finish-description { color: #505259; } +.nut-step-finish-title { + color: #ff0f23; +} .nut-step-finish-icon { border-width: 1px; background-color: #ffffff; @@ -99,43 +103,39 @@ background-color: #ff0f23; } .nut-step-wait-inner { - color: #1a1a1a; + color: #ffffff; } .nut-step-wait-description { color: #505259; } - -.nut-steps-dot .nut-step-head { - margin: 10px 0; -} -.nut-steps-dot .nut-step-line { - top: 7px; -} -.nut-steps-dot .nut-step-icon { +.nut-step-dot-icon { width: 6px; height: 6px; border: 2px solid #ffffff; border-radius: 999vmax; box-sizing: content-box; } -.nut-steps-dot .nut-step-wait .nut-step-icon { +.nut-step-dot-wait-icon { background-color: #888b94; } -.nut-steps-dot .nut-step-finish .nut-step-icon { +.nut-step-dot-finish-icon { background-color: #ffffff; border-color: #ff0f23; } -.nut-steps-dot .nut-step-process .nut-step-icon { +.nut-step-dot-process-icon { position: relative; } -.nut-steps-dot .nut-step-process .nut-step-icon:before { +.nut-step-dot-process-icon::before { content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; + transform: translate(-50%, -50%); + /* #ifdef harmony*/ + top: 3px; + left: 3px; + /* #endif */ width: 14px; height: 14px; background-color: #ff0f23; @@ -206,6 +206,7 @@ } .nut-steps-vertical { + display: flex; height: 100%; - flex-flow: column; + flex-direction: column; } \ No newline at end of file diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 72d784d16e..e12197774d 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -6,6 +6,7 @@ } .nut-steps-vertical { + display: flex; height: 100%; - flex-flow: column; + flex-direction: column; } From 5f91a011ca0967760b216adfb70b9d0ca2890742 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 20 Aug 2024 21:08:57 +0800 Subject: [PATCH 08/12] chore: save --- src/packages/step/step.harmony.css | 38 ++--- src/packages/step/step.scss | 214 +++++++++++------------- src/packages/step/step.taro.tsx | 12 +- src/packages/steps/demos/taro/demo2.tsx | 2 +- src/packages/steps/demos/taro/demo8.tsx | 34 ++-- src/packages/steps/demos/taro/demo9.tsx | 42 ++--- src/packages/steps/steps.harmony.css | 17 +- 7 files changed, 176 insertions(+), 183 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index a7a5c85ced..e5480719c8 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -1,6 +1,4 @@ .nut-step { - flex-grow: 0; - flex-shrink: 0; flex: 1; text-align: center; font-size: 0; @@ -51,7 +49,6 @@ border-style: solid; } .nut-step-main { - padding: 0 10%; display: flex; flex-direction: column; justify-content: center; @@ -64,7 +61,8 @@ color: #1a1a1a; } .nut-step-description { - display: block; + display: flex; + flex-wrap: wrap; font-size: 12px; color: #505259; } @@ -84,8 +82,8 @@ .nut-step-process-description { color: #505259; } -.nut-step-finish-inner { - color: #ff0f23; +.nut-step-finish-description { + color: #505259; } .nut-step-finish-description { color: #505259; @@ -99,7 +97,7 @@ border-color: #ff0f23; color: #ff0f23; } -.nut-step-finish-line { +.nut-step-finish-finish-line { background-color: #ff0f23; } .nut-step-wait-inner { @@ -142,33 +140,29 @@ border-radius: 999vmax; opacity: 0.23; } - -.nut-steps-horizontal.nut-steps-dot .nut-step-line { - top: 50%; - bottom: -50%; -} - -.nut-steps-vertical .nut-step { +.nut-step-vertical { display: flex; flex-direction: row; - height: 33.34%; + align-items: start; } -.nut-steps-vertical .nut-step-line { +.nut-step-vertical-line { position: absolute; display: inline-block; width: 1px; - height: 70%; + height: 40px; background: #888b94; - top: calc(25px + (100% - 70% - 12px) / 2); + top: 38px; left: calc(50% - 1px); } -.nut-steps-vertical.nut-steps-dot .nut-step-line { - top: calc(6px + (100% - 70%) / 2); -} -.nut-steps-vertical .nut-step-main { +.nut-step-vertical-main { display: inline-block; padding-left: 6%; text-align: start; + position: relative; + bottom: 10px; +} +.nut-step-vertical-dot-line { + top: 30px; } [dir=rtl] .nut-step-line { diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 96d03adfcc..f6e694dc6c 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -1,6 +1,4 @@ .nut-step { - flex-grow: 0; - flex-shrink: 0; flex: 1; text-align: center; font-size: 0; @@ -12,7 +10,7 @@ align-items: center; margin-bottom: $steps-base-icon-margin-bottom; } - + // 基本样式 &-line { position: absolute; height: $steps-base-line-height; @@ -56,7 +54,6 @@ } &-main { - padding: 0 10%; display: flex; flex-direction: column; justify-content: center; @@ -71,129 +68,122 @@ } &-description { - display: block; + display: flex; + flex-wrap: wrap; font-size: $steps-base-description-font-size; color: $steps-base-description-color; } - - &-process-icon { - background-color: $steps-process-icon-bg-color; - border-color: $steps-process-icon-bg-color; - color: $steps-process-icon-color; - } - &-process-title { - color: $steps-process-title-color; - font-size: $steps-process-title-font-size; - font-weight: $steps-process-title-font-weight; - } - &-process-inner { - color: $steps-process-icon-color; - } - &-process-description { - color: $steps-process-description-color; - } - - &-finish-inner { - color: $steps-finish-title-color; - } - &-finish-description { - color: $steps-finish-description-color; - } - &-finish-title { - color: $steps-finish-icon-color; - } - &-finish-icon { - border-width: 1px; - background-color: $steps-finish-icon-bg-color; - border-color: $steps-finish-icon-border-color; - color: $steps-finish-icon-color; - } - &-finish-line { - background-color: $steps-finish-line-background; - } - &-wait-inner { - color: $steps-wait-icon-color; - } - &-wait-description { - color: $steps-wait-description-color; - } - &-dot-icon { - width: $steps-dot-icon-width; - height: $steps-dot-icon-height; - border: $steps-dot-icon-border; - border-radius: 999vmax; - box-sizing: content-box; + // 3种状态 + &-process { + &-icon { + background-color: $steps-process-icon-bg-color; + border-color: $steps-process-icon-bg-color; + color: $steps-process-icon-color; + } + &-title { + color: $steps-process-title-color; + font-size: $steps-process-title-font-size; + font-weight: $steps-process-title-font-weight; + } + &-inner { + color: $steps-process-icon-color; + } + &-description { + color: $steps-process-description-color; + } } - &-dot-wait-icon { - background-color: $steps-dot-wait-icon-bg-color; + &-finish { + &-description { + color: $steps-process-description-color; + } + &-description { + color: $steps-finish-description-color; + } + &-title { + color: $steps-finish-icon-color; + } + &-icon { + border-width: 1px; + background-color: $steps-finish-icon-bg-color; + border-color: $steps-finish-icon-border-color; + color: $steps-finish-icon-color; + } + &-finish-line { + background-color: $steps-finish-line-background; + } } - &-dot-finish-icon { - background-color: $steps-dot-finish-icon-bg-color; - border-color: $steps-dot-finish-icon-border-color; + &-wait { + &-inner { + color: $steps-wait-icon-color; + } + &-description { + color: $steps-wait-description-color; + } } - &-dot-process-icon { - position: relative; - &::before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - /* #ifdef harmony*/ - top: 3px; - left: 3px; - /* #endif */ - width: 14px; - height: 14px; - background-color: $steps-process-icon-before-bg-color; + // 点模式 + &-dot { + &-icon { + width: $steps-dot-icon-width; + height: $steps-dot-icon-height; + border: $steps-dot-icon-border; border-radius: 999vmax; - opacity: 0.23; + box-sizing: content-box; } - } -} - -.nut-steps-horizontal { - &.nut-steps-dot { - .nut-step-line { - top: 50%; - bottom: -50%; + &-wait-icon { + background-color: $steps-dot-wait-icon-bg-color; + } + &-finish-icon { + background-color: $steps-dot-finish-icon-bg-color; + border-color: $steps-dot-finish-icon-border-color; + } + &-process-icon { + position: relative; + &::before { + content: ''; + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + /* #ifdef harmony*/ + top: 3px; + left: 3px; + /* #endif */ + width: 14px; + height: 14px; + background-color: $steps-process-icon-before-bg-color; + border-radius: 999vmax; + opacity: 0.23; + } } } -} - -.nut-steps-vertical { - .nut-step { + // 垂直模式 + &-vertical { display: flex; flex-direction: row; - height: 33.34%; - } - - .nut-step-line { - position: absolute; - display: inline-block; - width: 1px; - height: $steps-base-line-width; - background: $steps-base-line-background; - top: calc( - $steps-base-icon-height + - (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2 - ); - left: calc(50% - 1px); - } - - &.nut-steps-dot { - .nut-step-line { - top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2); + align-items: start; + &-line { + position: absolute; + display: inline-block; + width: 1px; + height: 40px; + background: $steps-base-line-background; + top: 38px; + left: calc(50% - 1px); + } + &-main { + display: inline-block; + padding-left: 6%; + text-align: start; + position: relative; + bottom: 10px; + } + &-dot-line { + top: 30px; } - } - - .nut-step-main { - display: inline-block; - padding-left: 6%; - text-align: start; } } + [dir='rtl'] .nut-step, .nut-rtl .nut-step { &-line { diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 5022a9d086..2263bf88d8 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -40,7 +40,8 @@ export const Step: FunctionComponent< } const parent: any = useContext(DataContext) - const dot = parent.propSteps.dot + const { dot, direction } = parent.propSteps + const getCurrentStatus = () => { const index = value if (index < +parent.propSteps.value) return 'finish' @@ -54,6 +55,9 @@ export const Step: FunctionComponent< const classes = classNames( classPrefix, `${classPrefix}-${getCurrentStatus()}`, + { + [`${classPrefix}-vertical`]: direction === 'vertical', + }, className ) @@ -106,12 +110,14 @@ export const Step: FunctionComponent< ))} {(title || description) && ( - + diff --git a/src/packages/steps/demos/taro/demo2.tsx b/src/packages/steps/demos/taro/demo2.tsx index c5b60478b1..d0e9b6f223 100644 --- a/src/packages/steps/demos/taro/demo2.tsx +++ b/src/packages/steps/demos/taro/demo2.tsx @@ -5,7 +5,7 @@ const Demo2 = () => { const [val, setVal] = useState(1) return ( <> - setVal((val % 3) + 1)}> + setVal(v)}> diff --git a/src/packages/steps/demos/taro/demo8.tsx b/src/packages/steps/demos/taro/demo8.tsx index 2978808799..c7d79021f9 100644 --- a/src/packages/steps/demos/taro/demo8.tsx +++ b/src/packages/steps/demos/taro/demo8.tsx @@ -1,24 +1,26 @@ import React from 'react' -import { View } from '@tarojs/components' import { Steps, Step } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo8 = () => { return ( - - - - - - - + + + + + ) } export default Demo8 diff --git a/src/packages/steps/demos/taro/demo9.tsx b/src/packages/steps/demos/taro/demo9.tsx index 33fe9e5dc9..4fbf3832c4 100644 --- a/src/packages/steps/demos/taro/demo9.tsx +++ b/src/packages/steps/demos/taro/demo9.tsx @@ -1,29 +1,29 @@ import React from 'react' -import { Text, View } from '@tarojs/components' +import { Text } from '@tarojs/components' import { Steps, Step } from '@nutui/nutui-react-taro' const Demo9 = () => { return ( - - - - - - 收货地址为： - 北京市经济技术开发区科创十一街18号院京东大厦 - - } - /> - - + + + + 收货地址为：北京市经济技术开发区科创十一街18号院京东大厦 + } + /> + ) } export default Demo9 diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css index 1693cab8df..8da6ac33fb 100644 --- a/src/packages/steps/steps.harmony.css +++ b/src/packages/steps/steps.harmony.css @@ -148,29 +148,30 @@ bottom: -50%; } -.nut-steps-vertical .nut-step { +.nut-step-vertical { display: flex; flex-direction: row; - height: 33.34%; } -.nut-steps-vertical .nut-step-line { + +.nut-step-vertical-line { position: absolute; display: inline-block; width: 1px; height: 70%; background: #888b94; - top: calc(25px + (100% - 70% - 12px) / 2); left: calc(50% - 1px); } -.nut-steps-vertical.nut-steps-dot .nut-step-line { - top: calc(6px + (100% - 70%) / 2); -} -.nut-steps-vertical .nut-step-main { + +.nut-step-vertical-main { display: inline-block; padding-left: 6%; text-align: start; } +.nut-step-vertical-dot-line { + top: calc(6px + (100% - 70%) / 2); +} + [dir=rtl] .nut-step-line { left: auto; right: calc(50% + (100% - 70%) / 2); From 30864c63555da4e0db524631b8012f33be4477c4 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 20 Aug 2024 21:25:06 +0800 Subject: [PATCH 09/12] chore: save --- src/packages/step/step.harmony.css | 5 ++++- src/packages/step/step.scss | 5 ++++- src/packages/step/step.taro.tsx | 14 +++++++++++--- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index e5480719c8..193643c299 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -97,9 +97,12 @@ border-color: #ff0f23; color: #ff0f23; } -.nut-step-finish-finish-line { +.nut-step-finish-line { background-color: #ff0f23; } +.nut-step-finish-inner { + color: #ff0f23; +} .nut-step-wait-inner { color: #ffffff; } diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index f6e694dc6c..527ee54955 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -108,9 +108,12 @@ border-color: $steps-finish-icon-border-color; color: $steps-finish-icon-color; } - &-finish-line { + &-line { background-color: $steps-finish-line-background; } + &-inner { + color: $steps-finish-icon-color; + } } &-wait { &-inner { diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 2263bf88d8..62fc3a7ad1 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -52,6 +52,7 @@ export const Step: FunctionComponent< } const classPrefix = `nut-step` + const directionClass = direction === 'vertical' ? 'vertical' : '' const classes = classNames( classPrefix, `${classPrefix}-${getCurrentStatus()}`, @@ -92,7 +93,7 @@ export const Step: FunctionComponent< } return ( - + {(title || description) && ( Date: Wed, 21 Aug 2024 11:16:05 +0800 Subject: [PATCH 10/12] chore: update --- src/packages/step/step.harmony.css | 9 ++--- src/packages/step/step.scss | 13 +++---- src/packages/steps/demos/taro/demo8.tsx | 38 +++++++++++--------- src/packages/steps/demos/taro/demo9.tsx | 48 ++++++++++++++----------- src/packages/steps/steps.harmony.css | 33 +++++++---------- 5 files changed, 73 insertions(+), 68 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 193643c299..50aa90efa5 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -150,19 +150,16 @@ } .nut-step-vertical-line { position: absolute; - display: inline-block; width: 1px; height: 40px; background: #888b94; - top: 38px; - left: calc(50% - 1px); } .nut-step-vertical-main { - display: inline-block; + display: flex; + flex-direction: column; + align-items: start; padding-left: 6%; text-align: start; - position: relative; - bottom: 10px; } .nut-step-vertical-dot-line { top: 30px; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 527ee54955..a0fa535c82 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -167,19 +167,20 @@ align-items: start; &-line { position: absolute; - display: inline-block; + // display: inline-block; width: 1px; height: 40px; background: $steps-base-line-background; - top: 38px; - left: calc(50% - 1px); + // top: 38px; + // left: calc(50% - 1px); } + &-main { - display: inline-block; + display: flex; + flex-direction: column; + align-items: start; padding-left: 6%; text-align: start; - position: relative; - bottom: 10px; } &-dot-line { top: 30px; diff --git a/src/packages/steps/demos/taro/demo8.tsx b/src/packages/steps/demos/taro/demo8.tsx index c7d79021f9..d36b40b3f1 100644 --- a/src/packages/steps/demos/taro/demo8.tsx +++ b/src/packages/steps/demos/taro/demo8.tsx @@ -1,26 +1,32 @@ import React from 'react' +import { View } from '@tarojs/components' import { Steps, Step } from '@nutui/nutui-react-taro' import pxTransform from '@/utils/px-transform' const Demo8 = () => { return ( - - - - - + + + + + + ) } export default Demo8 diff --git a/src/packages/steps/demos/taro/demo9.tsx b/src/packages/steps/demos/taro/demo9.tsx index 4fbf3832c4..29609da48a 100644 --- a/src/packages/steps/demos/taro/demo9.tsx +++ b/src/packages/steps/demos/taro/demo9.tsx @@ -1,29 +1,37 @@ import React from 'react' -import { Text } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import { Steps, Step } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo9 = () => { return ( - - - - 收货地址为：北京市经济技术开发区科创十一街18号院京东大厦 - } - /> - + + + + + 收货地址为： + 北京市经济技术开发区科创十一街18号院京东大厦 + + } + /> + + ) } export default Demo9 diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css index 8da6ac33fb..fb6402d59f 100644 --- a/src/packages/steps/steps.harmony.css +++ b/src/packages/steps/steps.harmony.css @@ -1,6 +1,4 @@ .nut-step { - flex-grow: 0; - flex-shrink: 0; flex: 1; text-align: center; font-size: 0; @@ -51,7 +49,6 @@ border-style: solid; } .nut-step-main { - padding: 0 10%; display: flex; flex-direction: column; justify-content: center; @@ -64,7 +61,8 @@ color: #1a1a1a; } .nut-step-description { - display: block; + display: flex; + flex-wrap: wrap; font-size: 12px; color: #505259; } @@ -84,8 +82,8 @@ .nut-step-process-description { color: #505259; } -.nut-step-finish-inner { - color: #ff0f23; +.nut-step-finish-description { + color: #505259; } .nut-step-finish-description { color: #505259; @@ -102,6 +100,9 @@ .nut-step-finish-line { background-color: #ff0f23; } +.nut-step-finish-inner { + color: #ff0f23; +} .nut-step-wait-inner { color: #ffffff; } @@ -142,34 +143,26 @@ border-radius: 999vmax; opacity: 0.23; } - -.nut-steps-horizontal.nut-steps-dot .nut-step-line { - top: 50%; - bottom: -50%; -} - .nut-step-vertical { display: flex; flex-direction: row; + align-items: start; } - .nut-step-vertical-line { position: absolute; - display: inline-block; width: 1px; - height: 70%; + height: 40px; background: #888b94; - left: calc(50% - 1px); } - .nut-step-vertical-main { - display: inline-block; + display: flex; + flex-direction: column; + align-items: start; padding-left: 6%; text-align: start; } - .nut-step-vertical-dot-line { - top: calc(6px + (100% - 70%) / 2); + top: 30px; } [dir=rtl] .nut-step-line { From aa67d8fee8b071cb29b2883af37845cd0620358a Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Wed, 21 Aug 2024 15:38:09 +0800 Subject: [PATCH 11/12] chore: update --- src/packages/step/step.harmony.css | 9 +++++++-- src/packages/step/step.scss | 12 +++++++----- src/packages/step/step.taro.tsx | 26 +++++++++++++++++++++---- src/packages/steps/demos/taro/demo9.tsx | 5 +++-- src/packages/steps/steps.taro.tsx | 21 ++++++++++++++++---- 5 files changed, 56 insertions(+), 17 deletions(-) diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css index 50aa90efa5..cba17c5f62 100644 --- a/src/packages/step/step.harmony.css +++ b/src/packages/step/step.harmony.css @@ -147,12 +147,15 @@ display: flex; flex-direction: row; align-items: start; + position: relative; } .nut-step-vertical-line { position: absolute; + top: 150%; width: 1px; - height: 40px; + height: 50px; background: #888b94; + left: calc(50% - 1px); } .nut-step-vertical-main { display: flex; @@ -160,9 +163,11 @@ align-items: start; padding-left: 6%; text-align: start; + position: relative; + bottom: 10px; } .nut-step-vertical-dot-line { - top: 30px; + top: 300%; } [dir=rtl] .nut-step-line { diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index a0fa535c82..46275f6e6f 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -165,14 +165,14 @@ display: flex; flex-direction: row; align-items: start; + position: relative; &-line { position: absolute; - // display: inline-block; + top: 150%; width: 1px; - height: 40px; + height: 50px; background: $steps-base-line-background; - // top: 38px; - // left: calc(50% - 1px); + left: calc(50% - 1px); } &-main { @@ -181,9 +181,11 @@ align-items: start; padding-left: 6%; text-align: start; + position: relative; + bottom: 10px; } &-dot-line { - top: 30px; + top: 300%; } } } diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx index 62fc3a7ad1..f7c61aaa87 100644 --- a/src/packages/step/step.taro.tsx +++ b/src/packages/step/step.taro.tsx @@ -80,15 +80,31 @@ export const Step: FunctionComponent< return { display: 'none' } } if (harmony()) { + if (direction === 'vertical') { + return dot + ? { + left: pxTransform(3), + top: '30%', + } + : { + left: '4%', + top: '40%', + } + } return { left: `${leftPosition}%`, top: pxTransform(dot ? 3 : 12.5), } } if (rn()) { - return { - left: `${leftPosition}%`, - } + return direction === 'vertical' + ? { + left: '50%', + top: dot ? '30%' : '40%', + } + : { + left: `${leftPosition}%`, + } } } return ( @@ -124,7 +140,9 @@ export const Step: FunctionComponent< {(title || description) && ( { title="未开始" description={ <> - 收货地址为： - 北京市经济技术开发区科创十一街18号院京东大厦 + + 收货地址为： 北京市经济技术开发区科创十一街18号院京东大厦 + } /> diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx index 8b9cd49c07..0c1cc2a7dc 100644 --- a/src/packages/steps/steps.taro.tsx +++ b/src/packages/steps/steps.taro.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames' import { View } from '@tarojs/components' import { DataContext } from './context' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { harmonyAndRn } from '@/utils/platform-taro' export interface StepsProps extends BasicComponent { value: number @@ -45,15 +46,27 @@ export const Steps: FunctionComponent< }, className ) - return ( - + const renderContent = () => { + if (harmonyAndRn()) { + return ( + + + + {children} + + + + ) + } + return ( {children} - - ) + ) + } + return <>{renderContent()} } Steps.displayName = 'NutSteps' From 5dec6bc6a6dc546280d767e66a885b37295dd61e Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Wed, 21 Aug 2024 15:50:36 +0800 Subject: [PATCH 12/12] feat: over --- src/packages/steps/demos/taro/demo1.tsx | 7 ++++++- src/packages/steps/demos/taro/demo2.tsx | 7 ++++++- src/packages/steps/demos/taro/demo3.tsx | 7 ++++++- src/packages/steps/demos/taro/demo4.tsx | 7 ++++++- src/packages/steps/demos/taro/demo5.tsx | 7 ++++++- 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/packages/steps/demos/taro/demo1.tsx b/src/packages/steps/demos/taro/demo1.tsx index 04bb8a9e3c..e6f4d5b101 100644 --- a/src/packages/steps/demos/taro/demo1.tsx +++ b/src/packages/steps/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Steps, Step, Button } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo1 = () => { const [val, setVal] = useState(1) @@ -11,7 +12,11 @@ const Demo1 = () => { - diff --git a/src/packages/steps/demos/taro/demo2.tsx b/src/packages/steps/demos/taro/demo2.tsx index d0e9b6f223..7181dcfc21 100644 --- a/src/packages/steps/demos/taro/demo2.tsx +++ b/src/packages/steps/demos/taro/demo2.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Steps, Step, Button } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo2 = () => { const [val, setVal] = useState(1) @@ -10,7 +11,11 @@ const Demo2 = () => { - diff --git a/src/packages/steps/demos/taro/demo3.tsx b/src/packages/steps/demos/taro/demo3.tsx index 2163645bfa..8966772f1c 100644 --- a/src/packages/steps/demos/taro/demo3.tsx +++ b/src/packages/steps/demos/taro/demo3.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Steps, Step, Button } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo3 = () => { const [val, setVal] = useState(1) @@ -10,7 +11,11 @@ const Demo3 = () => { - diff --git a/src/packages/steps/demos/taro/demo4.tsx b/src/packages/steps/demos/taro/demo4.tsx index e4e7626538..f75f5b6a8a 100644 --- a/src/packages/steps/demos/taro/demo4.tsx +++ b/src/packages/steps/demos/taro/demo4.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const customTheme = { nutuiStepsBaseLineWidth: '70%', @@ -25,7 +26,11 @@ const Demo4 = () => { - diff --git a/src/packages/steps/demos/taro/demo5.tsx b/src/packages/steps/demos/taro/demo5.tsx index 54074b1253..1a7378c633 100644 --- a/src/packages/steps/demos/taro/demo5.tsx +++ b/src/packages/steps/demos/taro/demo5.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const customTheme = { nutuiStepsBaseLineWidth: '30%', @@ -16,7 +17,11 @@ const Demo5 = () => { -