mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
refactor(Tag): update tag style (#3465)
This commit is contained in:
neverland
GitHub
parent
53e4f3bf89
commit
0c8c9438ee
@ -1,5 +1,4 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-tag class="demo-margin-right">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
@ -7,7 +6,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="圆角样式" padding>
|
||||
<van-tag class="demo-margin-right" round>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
|
||||
@ -15,7 +13,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标记样式" padding>
|
||||
<van-tag class="demo-margin-right" mark>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
@ -23,7 +20,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="空心样式" padding>
|
||||
<van-tag class="demo-margin-right" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
@ -32,7 +28,6 @@
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000"
|
||||
|
||||
@ -502,12 +502,15 @@
|
||||
@tabs-bottom-bar-color: @tabs-default-color;
|
||||
|
||||
// Tag
|
||||
@tag-padding: 0.2em 0.5em;
|
||||
@tag-font-size: @font-size-xs;
|
||||
@tag-medium-font-size: @font-size-sm;
|
||||
@tag-large-font-size: @font-size-md;
|
||||
@tag-padding: 0 @padding-base;
|
||||
@tag-text-color: @white;
|
||||
@tag-border-radius: 0.2em;
|
||||
@tag-font-size: @font-size-sm;
|
||||
@tag-border-radius: 2px;
|
||||
@tag-line-height: 16px;
|
||||
@tag-medium-padding: 2px 6px;
|
||||
@tag-large-padding: @padding-base @padding-xs;
|
||||
@tag-large-border-radius: @border-radius-md;
|
||||
@tag-large-font-size: @font-size-md;
|
||||
@tag-round-border-radius: @border-radius-max;
|
||||
@tag-danger-color: @red;
|
||||
@tag-primary-color: @blue;
|
||||
|
||||
@ -14,10 +14,9 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`type`属性控制标签颜色，默认为灰色
|
||||
通过 `type` 属性控制标签颜色，默认为灰色。
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
@ -26,10 +25,9 @@
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
设置 `plain` 属性设置为空心样式。
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
@ -38,10 +36,9 @@
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过`round`设置为圆角样式
|
||||
通过 `round` 设置为圆角样式。
|
||||
|
||||
```html
|
||||
<van-tag round>标签</van-tag>
|
||||
<van-tag round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
@ -50,10 +47,9 @@
|
||||
|
||||
### 标记样式
|
||||
|
||||
通过`mark`设置为标记样式(半圆角)
|
||||
通过 `mark` 设置为标记样式(半圆角)。
|
||||
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
@ -64,7 +60,6 @@
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">标签</van-tag>
|
||||
<van-tag color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
@ -80,7 +75,7 @@
|
||||
|
||||
### 可关闭标签
|
||||
|
||||
添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
|
||||
添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
@ -113,7 +108,6 @@ Page({
|
||||
success: true,
|
||||
},
|
||||
},
|
||||
|
||||
onClose(event) {
|
||||
this.setData({
|
||||
[`show.${event.target.id}`]: false,
|
||||
@ -128,13 +122,13 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| type | 类型，可选值为`primary` `success` `danger` `warning` | _string_ | - | - |
|
||||
| size | 大小, 可选值为`large` `medium` | _string_ | - | - |
|
||||
| type | 类型，可选值为 `primary` `success` `danger` `warning` | _string_ | - | - |
|
||||
| size | 大小, 可选值为 `large` `medium` | _string_ | - | - |
|
||||
| color | 标签颜色 | _string_ | - | - |
|
||||
| plain | 是否为空心样式 | _boolean_ | `false` | - |
|
||||
| round | 是否为圆角样式 | _boolean_ | `false` | - |
|
||||
| mark | 是否为标记样式 | _boolean_ | `false` | - |
|
||||
| text-color | 文本颜色，优先级高于`color`属性 | _string_ | `white` | - |
|
||||
| text-color | 文本颜色，优先级高于 `color` 属性 | _string_ | `white` | - |
|
||||
| closeable | 是否为可关闭标签 | _boolean_ | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
@ -2,19 +2,15 @@
|
||||
@import '../common/style/theme.less';
|
||||
|
||||
.van-tag {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: normal;
|
||||
.theme(padding, '@tag-padding');
|
||||
.theme(color, '@tag-text-color');
|
||||
.theme(font-size, '@tag-font-size');
|
||||
.theme(line-height, '@tag-line-height');
|
||||
.theme(border-radius, '@tag-border-radius');
|
||||
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
.theme(border-radius, '@tag-border-radius * 2');
|
||||
}
|
||||
|
||||
&--default {
|
||||
.theme(background-color, '@tag-default-color');
|
||||
|
||||
@ -57,36 +53,49 @@
|
||||
|
||||
&--plain {
|
||||
.theme(background-color, '@tag-plain-background-color');
|
||||
}
|
||||
|
||||
&--mark {
|
||||
padding-right: 0.7em;
|
||||
|
||||
&,
|
||||
&::after {
|
||||
.theme(
|
||||
border-radius,
|
||||
'0 @tag-round-border-radius @tag-round-border-radius 0'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
&,
|
||||
&::after {
|
||||
.theme(border-radius, '@tag-round-border-radius');
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--medium {
|
||||
.theme(font-size, '@tag-medium-font-size');
|
||||
.theme(padding, '@tag-medium-padding');
|
||||
}
|
||||
|
||||
&--large {
|
||||
.theme(padding, '@tag-large-padding');
|
||||
.theme(font-size, '@tag-large-font-size');
|
||||
.theme(border-radius, '@tag-large-border-radius');
|
||||
}
|
||||
|
||||
&--mark {
|
||||
.theme(
|
||||
border-radius,
|
||||
'0 @tag-round-border-radius @tag-round-border-radius 0'
|
||||
);
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
width: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
.theme(border-radius, '@tag-round-border-radius');
|
||||
}
|
||||
|
||||
&__close {
|
||||
min-width: 1em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
|
||||
class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
|
||||
style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
|
||||
>
|
||||
<slot />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user