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

8
packages/tag/index.vue
View File

@ -1,13 +1,13 @@
<template> <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> <slot></slot>
</span> </span>
</template> </template>
<script> <script>
const ALLOW_TYPE = ['danger', 'success', 'primary']; const ALLOW_TYPE = ['danger', 'success', 'primary'];
export default { export default {
name: 'van-tag', name: 'van-tag',
props: { props: {
type: { type: {
@ -17,5 +17,5 @@
mark: Boolean, mark: Boolean,
plain: Boolean plain: Boolean
} }
}; };
</script> </script>