mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Tag): add warning type (#1905)
This commit is contained in:
parent
f3c5dd9d8d
commit
9d3957e28a
@ -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>
|
||||
|
@ -1,3 +1,4 @@
|
||||
export const RED = '#f44';
|
||||
export const BLUE = '#1989fa';
|
||||
export const GREEN = '#07c160';
|
||||
export const ORANGE = '#ff976a';
|
||||
|
@ -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` |
|
||||
|
@ -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 = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user