feat(Tag): add warning type (#1905)

This commit is contained in:
neverland 2019-08-25 21:06:03 +08:00 committed by GitHub
parent f3c5dd9d8d
commit 9d3957e28a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 20 deletions

View File

@ -1,29 +1,33 @@
<demo-block title="基础用法" padding>
<van-tag class="demo-margin-right">标签</van-tag>
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
<van-tag class="demo-margin-right" type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag class="demo-margin-right" type="success">标签</van-tag>
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
<van-tag class="demo-margin-right" type="warning">标签</van-tag>
</demo-block>
<demo-block title="空心样式" padding>
<van-tag class="demo-margin-right" plain>标签</van-tag>
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</van-tag>
<van-tag class="demo-margin-right" plain type="success">标签</van-tag>
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
<van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
</demo-block>
<demo-block title="圆角样式" padding>
<van-tag class="demo-margin-right" round>标签</van-tag>
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
<van-tag round type="success">标签</van-tag>
<van-tag class="demo-margin-right" round type="success">标签</van-tag>
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
<van-tag class="demo-margin-right" round type="warning">标签</van-tag>
</demo-block>
<demo-block title="标记样式" padding>
<van-tag class="demo-margin-right" mark>标签</van-tag>
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</van-tag>
<van-tag class="demo-margin-right" mark type="success">标签</van-tag>
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
<van-tag class="demo-margin-right" mark type="warning">标签</van-tag>
</demo-block>
<demo-block title="自定义颜色" padding>
@ -31,11 +35,11 @@
<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 color="#ffe1e1" text-color="#ad0000">标签</van-tag>
<van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000">标签</van-tag>
</demo-block>
<demo-block title="标签大小" padding>
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
<van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
<van-tag type="danger" size="large">标签</van-tag>
<van-tag class="demo-margin-right" type="danger" size="large">标签</van-tag>
</demo-block>

View File

@ -1,3 +1,4 @@
export const RED = '#f44';
export const BLUE = '#1989fa';
export const GREEN = '#07c160';
export const ORANGE = '#ff976a';

View File

@ -18,9 +18,10 @@
```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>
```
### 空心样式
@ -29,9 +30,10 @@
```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>
```
### 圆角样式
@ -40,9 +42,10 @@
```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>
```
### 标记样式
@ -51,9 +54,10 @@
```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>
```
### 自定义颜色
@ -69,16 +73,16 @@
### 标签大小
```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>
```
### Props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| type | 类型,可选值为`primary` `success` `danger` | `String` | - |
| type | 类型,可选值为`primary` `success` `danger` `warning` | `String` | - |
| size | 大小, 可选值为`large` `medium` | `String` | - |
| color | 标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` |

View File

@ -1,11 +1,12 @@
import { VantComponent } from '../common/component';
import { RED, BLUE, GREEN } from '../common/color';
import { RED, BLUE, GREEN, ORANGE } from '../common/color';
const DEFAULT_COLOR = '#999';
const COLOR_MAP = {
danger: RED,
primary: BLUE,
success: GREEN
success: GREEN,
warning: ORANGE
};
type Style = {