blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Tag: update document

Browse Source
This commit is contained in:
陈嘉涵 2017-08-31 10:50:14 +08:00
parent a2a8523da1
commit 1f645422ca
2 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
docs/examples-docs/tag.md
View File

@ -1,10 +1,14 @@
<style>
.tags-container {
padding: 5px 15px;
.demo-tag {
.van-tag + .van-tag {
margin-left: 10px;
}
.van-tag {
&:first-of-type {
margin-left: 15px;
}
}
}
</style>
@ -20,44 +24,37 @@ Vue.component(Tag.name, Tag);
### 代码演示
#### 基础用法
`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
通过 type 属性控制 Tag 颜色，默认为灰色
:::demo 基础用法
```html
<div class="tags-container">
<van-tag>返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="danger">返现</van-tag>
<van-tag type="success">四字标签</van-tag>
<van-tag type="primary">一</van-tag>
</div>
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
```
:::
#### 高级用法
#### 空心样式
设置`plain`属性设置为空心样式
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
:::demo 高级用法
:::demo 空心样式
```html
<div class="tags-container">
<van-tag>返现</van-tag>
<van-tag plain>返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="danger">返现</van-tag>
<van-tag plain type="danger">返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="primary">返现</van-tag>
<van-tag plain type="primary">返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="success">返现</van-tag>
<van-tag plain type="success">返现</van-tag>
</div>
<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>
```
:::
#### 标记样式
通过`mark`设置为标记样式
:::demo 标记样式
```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>
```
:::
@ -65,12 +62,12 @@ Vue.component(Tag.name, Tag);
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| plain | 是否是空心tag | `boolean` | `false` | |
| mark | 是否是标记 | `boolean` | `false` | |
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | |
| mark | 是否为标记样式 | `Boolean` | `false` | |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义tag显示内容 |
| - | 自定义 Tag 显示内容 |

26
packages/tag/index.vue
View File

@ -1,21 +1,21 @@
<template>
<span class="van-tag" :class="[type ? `van-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
<span :class="['van-tag', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
<slot></slot>
</span>
</template>
<script>
const ALLOW_TYPE = ['danger', 'success', 'primary'];
const ALLOW_TYPE = ['danger', 'success', 'primary'];
export default {
name: 'van-tag',
props: {
type: {
type: String,
validator: val => ~ALLOW_TYPE.indexOf(val)
},
mark: Boolean,
plain: Boolean
}
};
export default {
name: 'van-tag',
props: {
type: {
type: String,
validator: val => ~ALLOW_TYPE.indexOf(val)
},
mark: Boolean,
plain: Boolean
}
};
</script>