mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(Tag): adjust size and padding (#6828)
This commit is contained in:
neverland
GitHub
parent
2d9f5d858a
commit
c49c57d2ca
@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
|
||||
<div><span class="van-tag van-tag--plain van-tag--danger" style="margin-right: 5px;">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
|
||||
</span> <span class="van-tag van-tag--plain van-tag--danger">
|
||||
标签
|
||||
</span></div>
|
||||
</div>
|
||||
|
||||
@ -766,12 +766,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,7 +14,6 @@ Vue.use(Tag);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
@ -24,7 +23,6 @@ Vue.use(Tag);
|
||||
### Round style
|
||||
|
||||
```html
|
||||
<van-tag round>Tag</van-tag>
|
||||
<van-tag round type="primary">Tag</van-tag>
|
||||
<van-tag round type="success">Tag</van-tag>
|
||||
<van-tag round type="danger">Tag</van-tag>
|
||||
@ -34,7 +32,6 @@ Vue.use(Tag);
|
||||
### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
@ -44,7 +41,6 @@ Vue.use(Tag);
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
@ -55,7 +51,6 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">Tag</van-tag>
|
||||
<van-tag color="#f2826a" plain>Tag</van-tag>
|
||||
<van-tag color="#7232dd">Tag</van-tag>
|
||||
<van-tag color="#7232dd" plain>Tag</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
|
||||
|
||||
@ -13,10 +13,9 @@ Vue.use(Tag);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`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>
|
||||
@ -25,10 +24,9 @@ Vue.use(Tag);
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过`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>
|
||||
@ -37,10 +35,9 @@ Vue.use(Tag);
|
||||
|
||||
### 标记样式
|
||||
|
||||
通过`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>
|
||||
@ -49,10 +46,9 @@ Vue.use(Tag);
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`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>
|
||||
@ -63,7 +59,6 @@ Vue.use(Tag);
|
||||
|
||||
```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>
|
||||
@ -79,7 +74,7 @@ Vue.use(Tag);
|
||||
|
||||
### 可关闭标签
|
||||
|
||||
添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
|
||||
添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tag>{{ t('tag') }}</van-tag>
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -9,7 +8,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('round')">
|
||||
<van-tag round>{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -17,7 +15,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mark')">
|
||||
<van-tag mark>{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -25,7 +22,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('plain')">
|
||||
<van-tag plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -34,7 +30,6 @@
|
||||
|
||||
<demo-block :title="t('customColor')">
|
||||
<van-tag color="#f2826a">{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#f2826a" plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#7232dd">{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-tag {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: @tag-padding;
|
||||
color: @tag-text-color;
|
||||
font-size: @tag-font-size;
|
||||
line-height: normal;
|
||||
line-height: @tag-line-height;
|
||||
border-radius: @tag-border-radius;
|
||||
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
border-radius: @tag-border-radius * 2;
|
||||
}
|
||||
|
||||
&--default {
|
||||
background-color: @tag-default-color;
|
||||
|
||||
@ -56,30 +52,42 @@
|
||||
|
||||
&--plain {
|
||||
background-color: @tag-plain-background-color;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
padding-right: 0.7em;
|
||||
|
||||
&,
|
||||
&::after {
|
||||
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
&,
|
||||
&::after {
|
||||
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 {
|
||||
font-size: @tag-medium-font-size;
|
||||
padding: @tag-medium-padding;
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: @tag-large-padding;
|
||||
font-size: @tag-large-font-size;
|
||||
border-radius: @tag-large-border-radius;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
width: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: @tag-round-border-radius;
|
||||
}
|
||||
|
||||
&__close {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { inherit, emit } from '../utils/functional';
|
||||
import { BORDER_SURROUND } from '../utils/constant';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
@ -63,7 +62,7 @@ function Tag(
|
||||
<span
|
||||
key="content"
|
||||
style={style}
|
||||
class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
|
||||
class={bem([classes, type])}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{slots.default?.()}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--primary">标签</span> <span class="van-tag van-tag--plain van-tag--success">标签</span> <span class="van-tag van-tag--plain van-tag--danger">标签</span> <span class="van-tag van-tag--plain van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
|
||||
<div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
|
||||
标签
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user