Skip to content

Commit

Permalink
fix(tag): complete components && update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Jul 7, 2022
1 parent e10bed6 commit a936c4f
Show file tree
Hide file tree
Showing 11 changed files with 266 additions and 233 deletions.
21 changes: 7 additions & 14 deletions src/tag/_example/tag.less
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
.group {
min-height: 56px;
margin: 16px 0;
padding: 0 16px;
padding: 32rpx;
background-color: #fff;
display: flex;
align-items: center;
width: 100%;

&.d-flex {
display: flex;
align-items: flex-start;
}

.left {
width: 172px;
&.padding-bottom {
padding: 32rpx 32rpx 0;
}

> view {
display: flex;
flex-direction: column;
padding-top: 16px;

.t-tag {
margin-bottom: 17px;
}
&.margin {
margin: 16rpx 0;
}

.t-tag {
margin: 0 4px;
margin-right: 32rpx;
}
}
17 changes: 11 additions & 6 deletions src/tag/_example/tag.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
Page({
data: {
show: true,
show: [true, true],
items: [
{
name: '已点击',
name: '选中',
checked: true,
},
{
name: '未点击',
name: '未选中',
checked: false,
},
{
name: '不可点击',
name: '不可选',
checked: false,
disabled: true,
},
Expand All @@ -20,9 +20,14 @@ Page({
handleCheckTagChange(e) {
console.log(e.detail.checked);
},
handleClose() {
handleClose0() {
this.setData({
show: false,
[`show[0]`]: false,
});
},
handleClose1() {
this.setData({
[`show[1]`]: false,
});
},
});
88 changes: 61 additions & 27 deletions src/tag/_example/tag.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,73 @@
<view class="demo-desc">用于表明主体的类目，属性或状态。</view>

<t-demo title="01 类型" desc="展示型标签">
<view class="group">
<t-tag theme="primary">重要</t-tag>
<t-tag theme="danger">危险</t-tag>
<t-tag theme="warning">警告</t-tag>
<view class="group margin">
<t-tag theme="primary">默认</t-tag>
<t-tag theme="success">成功</t-tag>
<t-tag theme="info">信息</t-tag>
<t-tag theme="warning">警告</t-tag>
<t-tag theme="danger">危险</t-tag>
<t-tag>信息</t-tag>
</view>

<view class="group">
<t-tag theme="primary" variant="outline">镂空标签</t-tag>
<t-tag theme="primary" variant="light">浅底标签</t-tag>
<t-tag theme="primary" variant="light-outline">标签</t-tag>
<view class="group margin">
<t-tag theme="primary" variant="light">默认</t-tag>
<t-tag theme="success" variant="light">成功</t-tag>
<t-tag theme="warning" variant="light">警告</t-tag>
<t-tag theme="danger" variant="light">危险</t-tag>
<t-tag theme="default" variant="light">信息</t-tag>
</view>

<view class="group">
<t-tag theme="primary" shape="circle">圆角标签</t-tag>
<t-tag theme="primary" shape="half-circle">半圆角标签</t-tag>
<view class="group margin">
<t-tag theme="primary" variant="outline">默认</t-tag>
<t-tag theme="success" variant="outline">成功</t-tag>
<t-tag theme="warning" variant="outline">警告</t-tag>
<t-tag theme="danger" variant="outline">危险</t-tag>
<t-tag theme="default" variant="outline">信息</t-tag>
</view>

<view class="group">
<t-tag wx:if="{{show}}" bind:close="handleClose" closable theme="primary">标签</t-tag>
<view class="group margin">
<t-tag theme="primary" variant="light-outline">默认</t-tag>
<t-tag theme="success" variant="light-outline">成功</t-tag>
<t-tag theme="warning" variant="light-outline">警告</t-tag>
<t-tag theme="danger" variant="light-outline">危险</t-tag>
<t-tag theme="default" variant="light-outline">信息</t-tag>
</view>

<view class="group">
<view class="group margin">
<t-tag theme="primary">深色</t-tag>
<t-tag theme="primary" variant="light">浅色</t-tag>
<t-tag theme="primary" variant="outline">描边</t-tag>
<t-tag theme="primary" variant="light-outline">描边浅色</t-tag>
</view>
</t-demo>
<t-demo title="" desc="带图标标签">
<view class="group margin">
<t-tag theme="primary">
标签
<t-icon name="app" size="14px" slot="icon" />
</t-tag>
</view>
</t-demo>
<t-demo title="" desc="圆角标签">
<view class="group margin">
<t-tag theme="primary" shape="round">圆弧</t-tag>
<t-tag theme="primary" shape="mark">半圆弧</t-tag>
</view>
</t-demo>
<t-demo title="" desc="可关闭标签">
<view class="group margin">
<t-tag wx:if="{{show[0]}}" bind:close="handleClose0" closable theme="primary">标签</t-tag>
<t-tag wx:if="{{show[1]}}" icon="app" bind:close="handleClose1" closable theme="primary">标签</t-tag>
</view>
</t-demo>
<t-demo title="" desc="超长省略文本标签">
<view class="group margin">
<t-tag max-width="150" title="超长省略文本标签超长省略文本标签">超长省略文本标签超长省略文本标签</t-tag>
</view>
</t-demo>

<t-demo title="02 状态" desc="标签状态">
<view class="group">
<view class="group margin">
<t-check-tag
wx:for="{{items}}"
wx:for-index="index"
Expand All @@ -46,18 +83,15 @@
</view>
</t-demo>

<t-demo title="03 规格" desc="规格标签">
<t-demo title="03 规格" desc="标签规格">
<view class="group padding-bottom d-flex">
<t-tag size="large" theme="primary">展示标签30</t-tag>
<t-tag size="medium" theme="primary">展示标签24</t-tag>
<t-tag size="small" theme="primary">展示标签20</t-tag>
</view>
<view class="group d-flex">
<view class="left">
<t-tag size="large" theme="primary">展示标签30</t-tag>
<t-tag size="medium" theme="primary">展示标签24</t-tag>
<t-tag size="small" theme="primary">展示标签22</t-tag>
</view>

<view class="right">
<t-check-tag size="large">点击标签30</t-check-tag>
<t-check-tag size="midium">点击标签24</t-check-tag>
</view>
<t-check-tag size="large">点击标签30</t-check-tag>
<t-check-tag size="medium">点击标签24</t-check-tag>
</view>
</t-demo>
</view>
109 changes: 48 additions & 61 deletions src/tag/check-tag.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,47 @@

@color-white: #fff;

@tag-default-color: #444;
@tag-default-background-color: #f5f5f5;
@tag-default-border-color: #f5f5f5;

@tag-disabled-color: #bbb;
@tag-disabled-background-color: #f5f5f5;
@tag-disabled-border-color: #f5f5f5;
@tag-default-color: rgba(231, 231, 231, 1);
@tag-default-background-color: #e7e7e7;
@tag-default-border-color: #e7e7e7;

@primary-color-disabled: #bbd3fb;
@tag-primary-color: @primary-color;
@tag-default-font-color: rgba(0, 0, 0, 0.9);

@tag-disabled-color: rgba(0, 0, 0, 26%);
@tag-disabled-background-color: rgba(231, 231, 231, 1);
@tag-disabled-border-color: rgba(231, 231, 231, 1);

@tag-checked-color: @primary-color;
@tag-checked-border-color: @primary-color;
@tag-checked-background-color: @primary-color;

@tag-small-font-size: 20rpx;
@tag-medium-font-size: 24rpx;
@tag-large-font-size: 28rpx;
@tag-small-padding: @spacer * 0.75 - 1px;
@tag-medium-padding: @spacer - 1px;
@tag-large-padding: @spacer-1 - 1px;

@tag-small-font-size: @font-size;
@tag-medium-font-size: @font-size-s;
@tag-large-font-size: @font-size-base;

@tag-small-height: 44rpx;
@tag-medium-height: 48rpx;
@tag-large-height: 60rpx;

@border-radius-square: 4px;
@border-radius-round: 999px;
@border-radius-mark: @border-radius-round;

@border-radius-square: 2px;
@border-radius-round: 4px;
@border-radius-circle: 999px;
@themes: primary, success, warning, default, danger;

.@{prefix}-tag {
display: inline-flex;
display: flex;
align-items: center;
border: 2rpx solid transparent;
box-sizing: border-box;
border-radius: @border-radius-square;
padding: 0 24rpx;
font-size: 24rpx;
font-size: @tag-medium-font-size;
// max-width: 240rpx;
user-select: none;

Expand All @@ -40,56 +51,39 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 48rpx;
line-height: 48rpx;
height: @tag-medium-height;
line-height: @tag-medium-height;
}

&__content {
width: 100%;
}

.@{prefix}__icon {
font-size: @tag-medium-font-size;
}

&__icon-close {
display: flex;
align-items: center;
margin-left: 16rpx;
&__icon:not(:empty) + &__text:not(:empty),
&__text:not(:empty) + &__icon-close:not(:empty) {
margin-left: @spacer / 2;
}

&.@{prefix}-tag--size {
&-small {
height: 44rpx;
line-height: 40rpx;
padding: 0 16rpx;
height: @tag-small-height;
line-height: @tag-small-height - 2px;
padding: 0 @tag-small-padding;
font-size: @tag-small-font-size;

.@{prefix}-icon {
font-size: @tag-small-font-size;
}
}

&-medium {
height: 48rpx;
line-height: 44rpx;
padding: 0 24rpx;
height: @tag-medium-height;
line-height: @tag-medium-height - 2px;
padding: 0 @tag-medium-padding;
font-size: @tag-medium-font-size;

.@{prefix}-icon {
font-size: @tag-medium-font-size;
}
}

&-large {
height: 60rpx;
line-height: 56rpx;
padding: 0 24rpx;
height: @tag-large-height;
line-height: @tag-large-height - 2px;
padding: 0 @tag-large-padding;
font-size: @tag-large-font-size;

.@{prefix}-icon {
font-size: @tag-large-font-size;
}
}
}

Expand All @@ -101,17 +95,14 @@
border-radius: @border-radius-round;
}

&.@{prefix}-tag--circle {
border-radius: @border-radius-circle;
}

&.@{prefix}-tag--half-circle {
border-radius: 0 @border-radius-circle @border-radius-circle 0;
&.@{prefix}-tag--mark {
border-radius: 0 @border-radius-mark @border-radius-mark 0;
}

&.@{prefix}-tag--checkable {
cursor: pointer;
color: @tag-default-color;
// -webkit-tap-highlight-color: transparent;
color: @tag-default-font-color;
background-color: @tag-default-background-color;
border-color: @tag-default-border-color;

Expand All @@ -121,15 +112,11 @@
border-color: @tag-primary-color;
}

&.@{prefix}-tag--disabled {
cursor: not-allowed;
color: @tag-disabled-color;
background-color: @tag-disabled-background-color;
border-color: @tag-disabled-border-color;
&.@{prefix}-tag--checked.@{prefix}-tag--disabled {
color: @color-white;
background-color: @primary-color-disabled;
}
}

&.@{prefix}-tag--closable {
&.@{prefix}-tag--disabled {
cursor: not-allowed;
color: @tag-disabled-color;
Expand Down
4 changes: 2 additions & 2 deletions src/tag/check-tag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ const name = `${prefix}-tag`;
@wxComponent()
export default class CheckTag extends SuperComponent {
data = {
prefix,
classPrefix: name,
classBasePrefix: prefix,
};

properties = props;
Expand All @@ -22,7 +22,7 @@ export default class CheckTag extends SuperComponent {
];

methods = {
onClickClose(e: WechatMiniprogram.BaseEvent) {
hangleClose(e: WechatMiniprogram.BaseEvent) {
this.triggerEvent('close', e);
},

Expand Down
Loading

0 comments on commit a936c4f

Please sign in to comment.