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.

Sign up for GitHub

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

Jump to bottom

fix(steps): use t-step-item as substep name #373

Merged
merged 1 commit into from
Apr 19, 2022
Merged

fix(steps): use t-step-item as substep name #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion example/app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"t-popup": "tdesign-miniprogram/popup/popup",
"t-indexes": "tdesign-miniprogram/indexes/indexes",
"t-steps": "tdesign-miniprogram/steps/steps",
"t-step": "tdesign-miniprogram/steps/step-item",
"t-step-item": "tdesign-miniprogram/steps/step-item",
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
"t-dropdown-item": "tdesign-miniprogram/dropdown-menu/dropdown-item",
"t-drawer": "tdesign-miniprogram/drawer/drawer",
Expand Down
144 changes: 72 additions & 72 deletions example/pages/steps/steps.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,155 +5,155 @@
<t-demo title="01 类型" desc="横向可操作步骤条">
<view class="group">
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
</t-steps>
<t-steps class="demo-steps" bind:change="handleChange" current="{{current}}">
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
<t-step-item title="步骤描述" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="demo-section__desc">横向带图标可操作步骤条</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" icon="user"></t-step>
<t-step title="步骤描述" icon="location" />
<t-step title="步骤描述" icon="time" />
<t-step-item title="步骤描述" icon="user"></t-step-item>
<t-step-item title="步骤描述" icon="location" />
<t-step-item title="步骤描述" icon="time" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1">
<t-step title="步骤描述" icon="user" content="辅助信息文字最多两行"></t-step>
<t-step title="步骤描述" icon="location" content="辅助信息文字最多两行" />
<t-step title="步骤描述" icon="time" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" icon="user" content="辅助信息文字最多两行"></t-step-item>
<t-step-item title="步骤描述" icon="location" content="辅助信息文字最多两行" />
<t-step-item title="步骤描述" icon="time" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="demo-section__desc">横向只读步骤条</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="0" readonly="true">
<t-step title="当前步骤" />
<t-step title="未完成步骤" />
<t-step-item title="当前步骤" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="0" readonly="true">
<t-step title="当前步骤" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="当前步骤" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="0" readonly="true">
<t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" />
<t-step title="当前步骤" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="当前步骤" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" content="辅助信息文字最多两行" />
<t-step title="当前步骤" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="当前步骤" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" content="辅助信息文字最多两行" />
<t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="group">
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" />
<t-step title="当前步骤" />
<t-step title="未完成步骤" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="当前步骤" />
<t-step-item title="未完成步骤" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" content="辅助信息文字最多两行" />
<t-step title="当前步骤" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="当前步骤" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
<t-steps class="demo-steps" defaultCurrent="1" readonly="true">
<t-step title="已完成步骤" content="辅助信息文字最多两行" />
<t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
<t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
</t-steps>
</view>

<view class="demo-section__desc">竖向只读步骤条</view>
<view class="group vertical">
<t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
<t-step title="已完成步骤" />
<t-step title="当前步骤" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="当前步骤" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
<t-step title="已完成步骤" />
<t-step title="错误步骤" status="error" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="错误步骤" status="error" />
<t-step-item title="未完成步骤" />
</t-steps>
</view>

<view class="demo-section__desc">竖向双层级只读步骤条</view>
<view class="group vertical">
<t-steps class="demo-steps vertical" current="1-0" readonly="true" layout="vertical">
<t-step title="已完成步骤" />
<t-step title="当前步骤" subStepItems="{{subStepItems}}" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="当前步骤" subStepItems="{{subStepItems}}" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps vertical" current="1-0" currentStatus="error" readonly="true" layout="vertical">
<t-step title="已完成步骤" />
<t-step title="错误步骤" subStepItems="{{subStepItems}}" />
<t-step title="未完成步骤" />
<t-step-item title="已完成步骤" />
<t-step-item title="错误步骤" subStepItems="{{subStepItems}}" />
<t-step-item title="未完成步骤" />
</t-steps>
</view>

<view class="demo-section__desc">竖向简化只读步骤条</view>
<view class="group vertical">
<t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical" theme="dot">
<t-step title="事件描述" />
<t-step title="事件描述" />
<t-step title="事件描述" />
<t-step-item title="事件描述" />
<t-step-item title="事件描述" />
<t-step-item title="事件描述" />
</t-steps>
</view>

<view class="demo-section__desc">自定义内容步骤条</view>
<view class="group vertical">
<t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
<t-step title="已完成步骤">
<t-step-item title="已完成步骤">
<view slot="content">可自定义此处内容</view>
<view class="extra-img" slot="extra">
<image
Expand All @@ -163,13 +163,13 @@
mode="widthFix"
/>
</view>
</t-step>
<t-step title="当前步骤">
</t-step-item>
<t-step-item title="当前步骤">
<view slot="content">可自定义此处内容</view>
</t-step>
<t-step title="未完成步骤">
</t-step-item>
<t-step-item title="未完成步骤">
<view slot="content">可自定义此处内容</view>
</t-step>
</t-step-item>
</t-steps>
</view>
</t-demo>
Expand Down
5 changes: 3 additions & 2 deletions src/steps/steps.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@

@step: ~'@{prefix}-step';
@steps: ~'@{step}s';
@item: ~'@{step}-item';

@{steps} {
display: flex;
}

@{step} {
@{item} {
flex: 1;
vertical-align: top;
position: relative;
Expand All @@ -28,7 +29,7 @@
&--vertical {
flex-direction: column;

@{step} {
@{item} {
width: 100%;
}
}
Expand Down