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> <demo-block title="基础用法" padding>
<van-tag class="demo-margin-right">标签</van-tag> <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 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>
<demo-block title="空心样式" padding> <demo-block title="空心样式" padding>
<van-tag class="demo-margin-right" plain>标签</van-tag> <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 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>
<demo-block title="圆角样式" padding> <demo-block title="圆角样式" padding>
<van-tag class="demo-margin-right" round>标签</van-tag> <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 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>
<demo-block title="标记样式" padding> <demo-block title="标记样式" padding>
<van-tag class="demo-margin-right" mark>标签</van-tag> <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 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>
<demo-block title="自定义颜色" padding> <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="#f2826a" plain>标签</van-tag>
<van-tag class="demo-margin-right" color="#7232dd">标签</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="#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>
<demo-block title="标签大小" padding> <demo-block title="标签大小" padding>
<van-tag class="demo-margin-right" type="danger">标签</van-tag> <van-tag class="demo-margin-right" type="danger">标签</van-tag>
<van-tag class="demo-margin-right" type="danger" size="medium">标签</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> </demo-block>

View File

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

View File

@ -18,9 +18,10 @@
```html ```html
<van-tag>标签</van-tag> <van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="primary">标签</van-tag> <van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</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 ```html
<van-tag plain>标签</van-tag> <van-tag plain>标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="primary">标签</van-tag> <van-tag plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</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 ```html
<van-tag round>标签</van-tag> <van-tag round>标签</van-tag>
<van-tag round type="danger">标签</van-tag>
<van-tag round type="primary">标签</van-tag> <van-tag round type="primary">标签</van-tag>
<van-tag round type="success">标签</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 ```html
<van-tag mark>标签</van-tag> <van-tag mark>标签</van-tag>
<van-tag mark type="danger">标签</van-tag>
<van-tag mark type="primary">标签</van-tag> <van-tag mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</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 ```html
<van-tag>标签</van-tag> <van-tag type="danger">标签</van-tag>
<van-tag size="medium">标签</van-tag> <van-tag type="danger" size="medium">标签</van-tag>
<van-tag size="large">标签</van-tag> <van-tag type="danger" size="large">标签</van-tag>
``` ```
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| type | 类型,可选值为`primary` `success` `danger` | `String` | - | | type | 类型,可选值为`primary` `success` `danger` `warning` | `String` | - |
| size | 大小, 可选值为`large` `medium` | `String` | - | | size | 大小, 可选值为`large` `medium` | `String` | - |
| color | 标签颜色 | `String` | - | | color | 标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` | | plain | 是否为空心样式 | `Boolean` | `false` |

View File

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