Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/amis-editor/src/plugin/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ export class ButtonPlugin extends BasePlugin {
formType: 'extend',
mode: 'normal',
label: '气泡提示',
id: 'button-tooltip', //便于扩充定位
hidden: isInDropdown,
form: {
body: [
Expand Down Expand Up @@ -351,11 +352,16 @@ export class ButtonPlugin extends BasePlugin {
...buttonStateFunc("${__editorState == 'active'}", 'active')
]
},
getSchemaTpl('theme:cssCode', {
themeClass: [
getSchemaTpl('theme:singleCssCode', {
selectors: [
{
value: '',
state: ['default', 'hover', 'active']
label: '按钮基本样式',
isRoot: true,
selector: '.cxd-Button'
},
{
label: '按钮内容样式',
selector: 'span'
}
]
})
Expand Down
5 changes: 5 additions & 0 deletions packages/amis-editor/src/plugin/Steps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@ export class StepsPlugin extends BasePlugin {
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'iconPosition',
label: '图标文字垂直展示',
value: false
}),
{
name: 'mode',
type: 'select',
Expand Down
7 changes: 6 additions & 1 deletion packages/amis-ui/scss/components/_steps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -36,7 +41,7 @@
}
}
&Wrapper {
display: inline-block;
display: inline-flex;
position: relative;
.#{$ns}StepsItem-body {
.#{$ns}StepsItem-title {
Expand Down
27 changes: 17 additions & 10 deletions packages/amis-ui/src/components/Steps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -102,6 +103,7 @@ export function Steps(props: StepsProps) {
mode = 'horizontal',
labelPlacement = 'horizontal',
progressDot = false,
iconPosition,
mobileUI,
onClickStep
} = props;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
);
Expand Down
7 changes: 7 additions & 0 deletions packages/amis/src/renderers/Steps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,11 @@ export interface StepsSchema extends BaseSchema {
* 点状步骤条
*/
progressDot?: boolean;

/**
* 切换图标位置
*/
iconPosition: false;
}

export interface StepsProps
Expand All @@ -98,6 +103,7 @@ export function StepsCmpt(props: StepsProps) {
steps,
status,
mode,
iconPosition,
labelPlacement,
progressDot,
data,
Expand Down Expand Up @@ -163,6 +169,7 @@ export function StepsCmpt(props: StepsProps) {
style={style}
status={statusValue}
mode={mode}
iconPosition={iconPosition}
progressDot={progressDot}
labelPlacement={labelPlacement}
mobileUI={mobileUI}
Expand Down
Loading