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

docs(Badge): add content slot demo (#7647)

Browse Source 
* docs(Badge): add content slot demo

* docs: fix content
This commit is contained in:
neverland
2020-11-26 23:04:13 +08:00
committed by GitHub
parent 1855cffeb2
commit 38c4f506e7
4 changed files with 188 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/badge/README.zh-CN.md
+49 -2
View File
@@ -23,14 +23,20 @@ Vue.use(Badge);
<van-badge :content="5">
<div class="child" />
</van-badge>
<van-badge :content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
<style>
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
@@ -45,6 +51,9 @@ Vue.use(Badge);
<van-badge :content="20" max="9">
<div class="child" />
</van-badge>
<van-badge :content="50" max="20">
<div class="child" />
</van-badge>
<van-badge :content="200" max="99">
<div class="child" />
</van-badge>
@@ -58,16 +67,54 @@ Vue.use(Badge);
<van-badge :content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
```
### 自定义徽标内容
通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。
```html
<van-badge>
<div class="child" />
<template #content>
<van-icon name="success" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="cross" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="down" class="badge-icon" />
</template>
</van-badge>
```
```css
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
```
### 独立展示
当 Badge 没有子元素时，会作为一个独立的元素进行展示。
```html
<van-badge :content="20" />
<van-badge :content="200" max="99" />
```