feat: 步骤条新增iconPositon属性，修复简单模式下箭头布局错乱

baidu · Nov 22, 2024 · a8b630b · a8b630b
1 parent f6091f7
commit a8b630b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/packages/amis-editor/src/plugin/Button.tsx b/packages/amis-editor/src/plugin/Button.tsx
@@ -204,6 +204,7 @@ export class ButtonPlugin extends BasePlugin {
                 formType: 'extend',
                 mode: 'normal',
                 label: '气泡提示',
+                id: 'button-tooltip', //便于扩充定位
                 hidden: isInDropdown,
                 form: {
                   body: [

diff --git a/packages/amis-editor/src/plugin/Steps.tsx b/packages/amis-editor/src/plugin/Steps.tsx
@@ -107,6 +107,11 @@ export class StepsPlugin extends BasePlugin {
       {
         title: '外观',
         body: [
+          getSchemaTpl('switch', {
+            name: 'iconPosition',
+            label: '图标文字垂直展示',
+            value: false
+          }),
           {
             name: 'mode',
             type: 'select',

diff --git a/packages/amis-ui/scss/components/_steps.scss b/packages/amis-ui/scss/components/_steps.scss
@@ -12,6 +12,11 @@
     height: auto;
     line-height: px2rem(22px);
     &-container {
+      &.#{$ns}StepsItem-vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
       position: relative;
       &Icon {
         vertical-align: top;
@@ -36,7 +41,7 @@
         }
       }
       &Wrapper {
-        display: inline-block;
+        display: inline-flex;
         position: relative;
         .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {

diff --git a/packages/amis-ui/src/components/Steps.tsx b/packages/amis-ui/src/components/Steps.tsx
@@ -89,6 +89,7 @@ export interface StepsProps extends ThemeProps {
   labelPlacement?: 'horizontal' | 'vertical';
   progressDot?: boolean;
   onClickStep?: (i: number, step: StepObject) => void;
+  iconPosition?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -102,6 +103,7 @@ export function Steps(props: StepsProps) {
     mode = 'horizontal',
     labelPlacement = 'horizontal',
     progressDot = false,
+    iconPosition,
     mobileUI,
     onClickStep
   } = props;
@@ -172,7 +174,12 @@ export function Steps(props: StepsProps) {
               }`
             )}
           >
-            <div className={cx('StepsItem-container')}>
+            <div
+              className={cx(
+                'StepsItem-container',
+                iconPosition && mode != 'vertical' && 'StepsItem-vertical'
+              )}
+            >
               <div className={cx('StepsItem-containerTail')}></div>
               {progressDot ? (
                 <div
@@ -239,16 +246,16 @@ export function Steps(props: StepsProps) {
                     <span>{step.description}</span>
                   </div>
                 </div>
+                {mode === 'simple' && i < stepsRow.length - 1 && (
+                  <div className={cx('StepsItem-icon-line')}>
+                    <Icon
+                      icon="right-arrow"
+                      className="icon"
+                      iconContent="StepsItem-icon-line"
+                    />
+                  </div>
+                )}
               </div>
-              {mode === 'simple' && i < stepsRow.length - 1 && (
-                <div className={cx('StepsItem-icon-line')}>
-                  <Icon
-                    icon="right-arrow"
-                    className="icon"
-                    iconContent="StepsItem-icon-line"
-                  />
-                </div>
-              )}
             </div>
           </li>
         );

diff --git a/packages/amis/src/renderers/Steps.tsx b/packages/amis/src/renderers/Steps.tsx
@@ -85,6 +85,11 @@ export interface StepsSchema extends BaseSchema {
    * 点状步骤条
    */
   progressDot?: boolean;
+
+  /**
+   * 切换图标位置
+   */
+  iconPosition: false;
 }
 
 export interface StepsProps
@@ -98,6 +103,7 @@ export function StepsCmpt(props: StepsProps) {
     steps,
     status,
     mode,
+    iconPosition,
     labelPlacement,
     progressDot,
     data,
@@ -163,6 +169,7 @@ export function StepsCmpt(props: StepsProps) {
       style={style}
       status={statusValue}
       mode={mode}
+      iconPosition={iconPosition}
       progressDot={progressDot}
       labelPlacement={labelPlacement}
       mobileUI={mobileUI}