mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Tag): add warning type (#4232)
This commit is contained in:
neverland
GitHub
parent
af018ca0f1
commit
e5dcf1cf04
@ -610,6 +610,7 @@
|
||||
@tag-dander-color: @red;
|
||||
@tag-primary-color: @blue;
|
||||
@tag-success-color: @green;
|
||||
@tag-warning-color: @orange;
|
||||
@tag-default-color: @gray-dark;
|
||||
@tag-plain-background-color: @white;
|
||||
|
||||
|
||||
@ -15,36 +15,40 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="danger">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>
|
||||
<van-tag plain type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Round style
|
||||
|
||||
```html
|
||||
<van-tag round>Tag</van-tag>
|
||||
<van-tag round type="danger">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>
|
||||
<van-tag round type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="danger">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>
|
||||
<van-tag mark type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
@ -60,9 +64,9 @@ Vue.use(Tag);
|
||||
### Custom Size
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag size="medium">Tag</van-tag>
|
||||
<van-tag size="large">Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="danger" size="medium">Tag</van-tag>
|
||||
<van-tag type="danger" size="large">Tag</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
@ -71,7 +75,7 @@ Vue.use(Tag);
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| type | Type, can be set to `primary` `success` `danger` | `string` | `default` |
|
||||
| type | Type, can be set to `primary` `success` `danger` `warning` | `string` | `default` |
|
||||
| size | Size, can be set to `large` `medium` | `string` | - |
|
||||
| color | Custom color | `string` | - |
|
||||
| plain | Whether to be plain style | `boolean` | `false` |
|
||||
|
||||
@ -17,9 +17,10 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
@ -28,9 +29,10 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 圆角样式
|
||||
@ -39,9 +41,10 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag round>标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
<van-tag round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
<van-tag round type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 标记样式
|
||||
@ -50,9 +53,10 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
@ -68,9 +72,9 @@ Vue.use(Tag);
|
||||
### 标签大小
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag size="medium">标签</van-tag>
|
||||
<van-tag size="large">标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="danger" size="medium">标签</van-tag>
|
||||
<van-tag type="danger" size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
@ -79,7 +83,7 @@ Vue.use(Tag);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `string` | `default` | - |
|
||||
| type | 类型，可选值为`primary` `success` `danger` `warning` | `string` | `default` | - |
|
||||
| size | 大小, 可选值为`large` `medium` | `string` | - | - |
|
||||
| color | 标签颜色 | `string` | - | - |
|
||||
| plain | 是否为空心样式 | `boolean` | `false` | - |
|
||||
|
||||
@ -2,116 +2,48 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tag>{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ $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>
|
||||
<van-tag type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('plain')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
plain
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
plain
|
||||
type="success"
|
||||
>
|
||||
{{ $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>
|
||||
<van-tag plain type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('round')">
|
||||
<van-tag round>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
type="danger"
|
||||
>
|
||||
{{ $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="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag round type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag round type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag round type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('mark')">
|
||||
<van-tag mark>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
mark
|
||||
type="danger"
|
||||
>
|
||||
{{ $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="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<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="#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>
|
||||
<van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customSize')">
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
type="danger"
|
||||
size="medium"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
type="danger"
|
||||
size="large"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -138,7 +70,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-tag {
|
||||
background-color: @white;
|
||||
|
||||
@ -45,6 +45,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: @tag-warning-color;
|
||||
|
||||
&.van-tag--plain {
|
||||
color: @tag-warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background-color: @tag-plain-background-color;
|
||||
}
|
||||
|
||||
@ -2,39 +2,11 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</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--round van-tag--danger van-hairline--surround">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-tag--round van-tag--primary van-hairline--surround">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--danger">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--round van-tag--primary">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--round van-tag--success">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--danger">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--mark van-tag--primary">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--mark van-tag--success">
|
||||
标签
|
||||
</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--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--large van-tag--danger">
|
||||
标签
|
||||
</span></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--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--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--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--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">标签</span> <span class="van-tag van-tag--large van-tag--danger">标签</span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user