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): complete icon slot && enrich externalClasses #437

Merged
merged 1 commit into from
May 24, 2022
Merged

fix(steps): complete icon slot && enrich externalClasses #437

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
24 changes: 23 additions & 1 deletion src/steps/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,28 @@ isComponent: true
<view slot="content">可自定义此处内容</view>
</t-step>
</t-steps>

<!-- 自定义step节点样式 -->
<t-steps class="demo-steps vertical" current="{{customStepCurrent}}" readonly="true" layout="vertical">
<t-step-item
wx:for="{{customStepItems}}"
wx:key="key"
wx:item="item"
icon="slot"
title="{{item.title}}"
content="{{item.content}}"
t-class-inner="t-class-inner t-class-inner--{{item.status}}"
t-class-title="t-class-title {{item.title? '' : 't-class-title--no'}}"
t-class-description="t-class-description"
t-class-extra="t-class-extra"
>
<view
slot="icon"
class="t-icon-slot t-icon-slot--{{item.status}} {{item.title? '' : 't-icon-slot--child'}}"
></view>
<view slot="extra">{{item.extra}}</view>
</t-step-item>
</t-steps>
```

### 受控用法
Expand Down Expand Up @@ -128,7 +150,7 @@ change | `({current: string | number, previous: string | number})` | 当前步
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
content | String / Slot | '' | 步骤描述 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-inner', 't-class-content', 't-class-title', 't-class-description', 't-class-extra', 't-class-sub', 't-class-sub-dot', 't-class-sub-content']` | N
icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
Expand Down
69 changes: 69 additions & 0 deletions src/steps/_example/steps.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,72 @@
.extra-img {
font-size: 0;
}

/**
* 自定义step节点样式：注意权重
*/
@default-color: #c5c5c5;
@finish-color: #0052d9;
@active-color: rgb(5, 150, 34);

@title-color: #000;
@description-color: rgb(38, 37, 37);
@extra-color: #c5c5c5;

.t-icon-slot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: @default-color;
&--child {
width: 10px;
height: 10px;
}

&--finish {
background-color: @finish-color;
}

&--active {
background-color: @active-color;
}

&--default {
background-color: @default-color;
}
}
/** 自定义line颜色：
* 方法1: 通过t-class-inner外部样式的 ::after
* 方法2: 覆盖组件内部样式。
*/
.t-class-inner {
&--finish::after {
background-color: @finish-color !important;
}

&--active::after {
background-color: @default-color !important;
}

&--default::after {
background-color: @default-color !important;
}
}

.t-class-title {
color: @title-color !important;
&--no {
margin: 0 !important;
}
}

.t-class-description {
color: @description-color !important;
}

.t-class-extra {
color: @extra-color;
text-align: left;
font-size: 20rpx !important;
margin-top: 0px !important;
}
43 changes: 43 additions & 0 deletions src/steps/_example/steps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,32 @@ Page({
title: '二级步骤描述',
},
],
customStepCurrent: 1,
customStepItems: [
{
title: '二级步骤描述',
content: '可自定义此处内容',
extra: '可自定义此处内容',
},
{
content: '可自定义此处内容',
extra: '可自定义此处内容',
},
{
content: '可自定义此处内容',
extra: '可自定义此处内容',
},
{
title: '二级步骤描述',
extra: '可自定义此处内容',
content: '可自定义此处内容',
},
{
title: '二级步骤描述',
extra: '可自定义此处内容',
content: '可自定义此处内容',
},
],
},

handleChange({ detail }) {
Expand All @@ -17,4 +43,21 @@ Page({
current: detail.current,
});
},

onLoad() {
const { customStepCurrent, customStepItems } = this.data;
const newCustomStepItems = customStepItems.map((element, elementIndex) => {
if (elementIndex < customStepCurrent) {
element.status = 'finish';
} else if (elementIndex === customStepCurrent) {
element.status = 'active';
} else {
element.status = 'default';
}
return element;
});
this.setData({
customStepItems: newCustomStepItems,
});
},
});
22 changes: 21 additions & 1 deletion src/steps/_example/steps.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
<view class="group vertical">
<t-steps class="demo-steps vertical" current="1-0" readonly="true" layout="vertical">
<t-step-item title="已完成步骤" />
<t-step-item title="当前步骤" subStepItems="{{subStepItems}}" />
<t-step-item title="当前步骤" subStepItems="{{subStepItems}}" t-class-sub-dot="t-class-sub-dot" />
<t-step-item title="未完成步骤" />
</t-steps>
<t-steps class="demo-steps vertical" current="1-0" currentStatus="error" readonly="true" layout="vertical">
Expand Down Expand Up @@ -171,6 +171,26 @@
<view slot="content">可自定义此处内容</view>
</t-step-item>
</t-steps>
<t-steps class="demo-steps vertical" current="{{customStepCurrent}}" readonly="true" layout="vertical">
<t-step-item
wx:for="{{customStepItems}}"
wx:key="key"
wx:item="item"
icon="slot"
title="{{item.title}}"
content="{{item.content}}"
t-class-inner="t-class-inner t-class-inner--{{item.status}}"
t-class-title="t-class-title {{item.title? '' : 't-class-title--no'}}"
t-class-description="t-class-description"
t-class-extra="t-class-extra"
>
<view
slot="icon"
class="t-icon-slot t-icon-slot--{{item.status}} {{item.title? '' : 't-icon-slot--child'}}"
></view>
<view slot="extra">{{item.extra}}</view>
</t-step-item>
</t-steps>
</view>
</t-demo>
</view>
70 changes: 38 additions & 32 deletions src/steps/step-item.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@
}

&__icon {
z-index: 1;
vertical-align: top;
font-size: @font-size-base;
position: relative;
color: @border-level-2-color;

&-number {
display: block;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -45,6 +45,17 @@
text-align: center;
border: 1px solid @step-item-icon-color;
border-radius: 50%;
background-color: #fff;
color: @step-item-icon-color;
}

&-slot {
display: flex;
justify-content: center;
align-items: center;
width: @connector-default-icon-width + 2px;
height: @connector-default-icon-width + 2px;
text-align: center;
color: @step-item-icon-color;
}
}
Expand Down Expand Up @@ -88,14 +99,15 @@
height: 1px;
background: @primary-color;
position: absolute;
width: calc(100% - @connector-default-icon-width - 2px);
left: calc(50% + @connector-default-icon-width / 2 + 1px);
transform: translateY(-50%);
width: 100%;
top: (@connector-default-icon-width / 2 + 1px);
// left: calc(50% + @connector-default-icon-width / 2 + 1px);
left: 50%;
}
&.@{item}__inner--large:after {
top: calc(@connector-normal-icon-width / 2);
width: calc(100% - @connector-normal-icon-width - 2px);
left: calc(50% + @connector-normal-icon-width / 2 + 1px);
// left: calc(50% + @connector-normal-icon-width / 2 + 1px);
}
}

Expand All @@ -112,16 +124,18 @@
}
& when(@direction = vertical) {
&.@{step}--not-last-child {
.@{item}__inner::after {
content: '';
display: block;
height: calc(100% - @connector-default-icon-width - 2px);
width: 1px;
background: @step-line-color;
transform: translateX(-50%);
position: absolute;
left: (@connector-default-icon-width / 2 + 1px);
top: @connector-default-icon-width + 2px;
.@{item}__inner {
&::after {
content: '';
display: block;
height: 100%;
width: 1px;
background: @step-line-color;
transform: translateX(-50%);
position: absolute;
left: (@connector-default-icon-width / 2 + 1px);
top: (@connector-default-icon-width / 2 + 1px);
}
}

.@{item}--finish {
Expand Down Expand Up @@ -171,34 +185,26 @@
.default-sub-status(@status) {
& when(@status = default) {
color: #c5c5c5;
.@{item}-sub-dot {
&-item {
background-color: #c5c5c5;
}
.@{item}-sub-dot-item {
background-color: #c5c5c5;
}
}
& when(@status = finish) {
color: #000000;
.@{item}-sub-dot {
&-item {
background-color: @primary-color;
}
.@{item}-sub-dot-item {
background-color: @primary-color;
}
}
& when(@status = process) {
color: @primary-color;
.@{item}-sub-dot {
&-item {
background-color: @primary-color;
}
.@{item}-sub-dot-item {
background-color: @primary-color;
}
}
& when(@status = error) {
color: @step-error-bg-color;
.@{item}-sub-dot {
&-item {
background-color: @step-error-bg-color;
}
.@{item}-sub-dot-item {
background-color: @step-error-bg-color;
}
}
}
Expand Down Expand Up @@ -307,7 +313,7 @@
width: 8px;
height: 8px;
border-radius: 50%;
background-color: @primary-color;
// background-color: @primary-color;
}
}

Expand Down
6 changes: 5 additions & 1 deletion src/steps/step-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@ export default class StepItem extends SuperComponent {

externalClasses = [
`${prefix}-class`,
`${prefix}-class-inner`,
`${prefix}-class-content`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-extra`,
`${prefix}-class-sub`,
`${prefix}-class-sub-dot`,
`${prefix}-class-sub-content`,
];

properties = props;
Expand Down Expand Up @@ -145,7 +149,7 @@ export default class StepItem extends SuperComponent {
curStatus: this.data.tempStatus,
curSubStepItems: this.data.subStepItems || [],
curSubStepItemsStatus: tempStatusList || [],
computedIcon: iconStatus || this.data.icon,
computedIcon: this.data.icon || iconStatus,
index,
isDot: theme === 'dot' && layout === 'vertical',
layout,
Expand Down
10 changes: 5 additions & 5 deletions src/steps/step-item.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
class="{{prefix}}-step {{prefix}}-step--{{layout}} {{prefix}}-step--{{theme}}-anchor {{prefix}}-step--{{isLastChild ? 'last-child':'not-last-child'}} {{prefix}}-class {{readonly ? prefix + '-step--readonly' : ''}}"
>
<view class="{{classPrefix}} {{classPrefix}}--{{curStatus}}">
<view class=" {{classPrefix}}__inner {{isLarge ? classPrefix + '__inner--large' : '' }}">
<view class=" {{classPrefix}}__inner {{isLarge ? classPrefix + '__inner--large' : '' }} {{prefix}}-class-inner">
<view class="{{classPrefix}}-wrapper">
<!-- icon -->
<view class="{{classPrefix}}__icon" bindtap="click">
<view wx:if="{{isDot}}" class="{{classPrefix}}__icon-dot"></view>
<view
wx:elif="{{computedIcon}}"
class="{{classPrefix}}__icon-number {{isLarge ? (classPrefix + '__icon-number--large') : ''}}"
class="{{computedIcon === 'slot'? (classPrefix + '__icon-slot' ) : (classPrefix + '__icon-number')}} {{isLarge ? (classPrefix + '__icon-number--large') : ''}}"
>
<slot wx:if="{{computedIcon === 'slot'}}" name="icon" />
<t-icon wx:else name="{{computedIcon}}" size="{{isLarge ? '24px' : '16px'}}" />
Expand Down Expand Up @@ -39,15 +39,15 @@
>
<!-- 子步骤条默认状态:default -->
<view
class="{{classPrefix}}-sub {{classPrefix}}-sub-status--default {{classPrefix}}-sub-status--{{curSubStepItemsStatus[index]}}"
class="{{classPrefix}}-sub {{classPrefix}}-sub-status--default {{classPrefix}}-sub-status--{{curSubStepItemsStatus[index]}} {{prefix}}-class-sub"
wx:for="{{curSubStepItems}}"
wx:key="key"
wx:item="item"
>
<view class="{{classPrefix}}-sub-dot">
<view class="{{classPrefix}}-sub-dot-item"></view>
<view class="{{classPrefix}}-sub-dot-item {{prefix}}-class-sub-dot"></view>
</view>
<view class="{{classPrefix}}-sub__content"> {{item.title}}</view>
<view class="{{classPrefix}}-sub__content {{prefix}}-class-sub-content"> {{ item.title }} </view>
</view>
</view>
</view>
Expand Down
Loading