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(tag): complete components && update styles #581

Merged
merged 2 commits into from
Jul 11, 2022
Merged

fix(tag): complete components && update styles #581

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66f1181
fix(tag): complete components && update styles
anlyyao Jul 7, 2022
bbc37d3
fix(tag): remove wxs
anlyyao Jul 11, 2022
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
20 changes: 6 additions & 14 deletions src/tag/_example/tag.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.group {
min-height: 56px;
margin: 16px 0;
padding: 0 16px;
padding: 32rpx;
background-color: #fff;
display: flex;
align-items: center;
Expand All @@ -11,21 +9,15 @@
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
Open in desktop
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,
});
},
});
71 changes: 40 additions & 31 deletions src/tag/_example/tag.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,54 @@
<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">深色</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>

<view class="group">
<t-tag theme="primary" shape="circle">圆角标签</t-tag>
<t-tag theme="primary" shape="half-circle">半圆角标签</t-tag>
</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>

<view class="group">
<t-tag wx:if="{{show}}" bind:close="handleClose" closable theme="primary">标签</t-tag>
</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>

<view class="group">
</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"
wx:key="index"
defaultChecked="{{item.checked}}"
checked="{{item.checked}}"
disabled="{{item.disabled}}"
data-index="{{index}}"
bind:change="handleCheckTagChange"
Expand All @@ -46,18 +59,14 @@
</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>
</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>
141 changes: 1 addition & 140 deletions src/tag/check-tag.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1 @@
@import '../common/index.less';

@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-primary-color: @primary-color;

@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;

@border-radius-square: 2px;
@border-radius-round: 4px;
@border-radius-circle: 999px;

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

&__text {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 48rpx;
line-height: 48rpx;
}

&__content {
width: 100%;
}

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

&__icon-close {
display: flex;
align-items: center;
margin-left: 16rpx;
}

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

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

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

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

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

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

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

&.@{prefix}-tag--round {
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--checkable {
cursor: pointer;
color: @tag-default-color;
background-color: @tag-default-background-color;
border-color: @tag-default-border-color;

&.@{prefix}-tag--checked {
color: @color-white;
background-color: @tag-primary-color;
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--closable {
&.@{prefix}-tag--disabled {
cursor: not-allowed;
color: @tag-disabled-color;
background-color: @tag-disabled-background-color;
border-color: @tag-disabled-border-color;
}
}
}
@import './common/base.less';
51 changes: 47 additions & 4 deletions src/tag/check-tag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './check-tag-props';
import { classNames } from '../common/utils';

const { prefix } = config;
const name = `${prefix}-tag`;

@wxComponent()
export default class CheckTag extends SuperComponent {
data = {
prefix,
classPrefix: name,
classBasePrefix: prefix,
className: '',
};

properties = props;
Expand All @@ -21,15 +23,56 @@ export default class CheckTag extends SuperComponent {
},
];

options = {
multipleSlots: true,
};

lifetimes = {
attached() {
this.setClass();
},
};

observers = {
checked() {
this.setClass();
},
};

methods = {
onClickClose(e: WechatMiniprogram.BaseEvent) {
setClass() {
const { prefix, classPrefix } = this.data;
const { size, shape, closable, disabled, checked, defaultChecked } = this.properties;
const isChecked = checked || defaultChecked;
const tagClass = [
classPrefix,
`${classPrefix}--checkable`,
closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
isChecked ? `${classPrefix}--checked ${prefix}-is-checked` : '',
`${classPrefix}--size-${size || 'medium'}`,
`${classPrefix}--shape-${shape || 'square'}`,
];
const className = classNames(tagClass);
this.setData({
className,
});
},

hangleClose(e: WechatMiniprogram.BaseEvent) {
if (this.data.disabled) return;

this.triggerEvent('close', e);
},

handleChange() {
if (this.data.disabled) return;

this._trigger('change', { checked: !this.data.checked });
const { checked, defaultChecked } = this.properties;
const isChecked = checked || defaultChecked;
this.setData({
checked: !isChecked,
});
this._trigger('change', { checked: !isChecked });
},
};
}
Loading