alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(Tag): update demo (#7020)

Browse Source
This commit is contained in:
neverland
2020-08-19 17:15:37 +08:00
committed by GitHub
parent 4116bc731a
commit ba46a15c30
4 changed files with 199 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tag/README.md
+26 -54
View File
@@ -20,69 +20,28 @@ Vue.use(Tag);
<van-tag type="warning">Tag</van-tag>
```
### Plain style
```html
<van-tag plain type="primary">Tag</van-tag>
```
### Round style
```html
<van-tag round type="primary">Tag</van-tag>
<van-tag round type="success">Tag</van-tag>
<van-tag round type="danger">Tag</van-tag>
<van-tag round type="warning">Tag</van-tag>
```
### Mark style
```html
<van-tag mark type="primary">Tag</van-tag>
<van-tag mark type="success">Tag</van-tag>
<van-tag mark type="danger">Tag</van-tag>
<van-tag mark type="warning">Tag</van-tag>
```
### Plain style
```html
<van-tag plain type="primary">Tag</van-tag>
<van-tag plain type="success">Tag</van-tag>
<van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="warning">Tag</van-tag>
```
### Custom Color
```html
<van-tag color="#f2826a">Tag</van-tag>
<van-tag color="#7232dd">Tag</van-tag>
<van-tag color="#7232dd" plain>Tag</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
```
### Custom Size
```html
<van-tag type="danger">Tag</van-tag>
<van-tag type="danger" size="medium">Tag</van-tag>
<van-tag type="danger" size="large">Tag</van-tag>
```
### Closeable
```html
<van-tag
v-if="show.primary"
closeable
size="medium"
type="primary"
@close="close('primary')"
>
Tag
</van-tag>
<van-tag
v-if="show.success"
closeable
size="medium"
type="success"
@close="close('success')"
>
<van-tag v-if="show" closeable size="medium" type="primary" @close="close">
Tag
</van-tag>
```
@@ -91,20 +50,33 @@ Vue.use(Tag);
export default {
data() {
return {
show: {
primary: true,
success: true,
},
show: true,
};
},
methods: {
close(type) {
this.show[type] = false;
close() {
this.show = false;
},
},
};
```
### Custom Size
```html
<van-tag type="primary">Tag</van-tag>
<van-tag type="primary" size="medium">Tag</van-tag>
<van-tag type="primary" size="large">Tag</van-tag>
```
### Custom Color
```html
<van-tag color="#7232dd">Tag</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
<van-tag color="#7232dd" plain>Tag</van-tag>
```
## API
### Props