docs(Badge): fix missing demo (#7976)

This commit is contained in:
neverland 2021-01-23 16:38:09 +08:00 committed by GitHub
parent 93298ec3b7
commit 7a190058ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 0 deletions

View File

@ -3,6 +3,12 @@
<van-badge content="5"> <van-badge content="5">
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
<van-badge content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot> <van-badge dot>
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
@ -12,6 +18,9 @@
<van-badge content="20" max="9"> <van-badge content="20" max="9">
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
<van-badge content="50" max="20">
<div class="child" />
</van-badge>
<van-badge content="200" max="99"> <van-badge content="200" max="99">
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
@ -21,12 +30,37 @@
<van-badge content="5" color="#1989fa"> <van-badge content="5" color="#1989fa">
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
<van-badge content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa"> <van-badge dot color="#1989fa">
<div class="child" /> <div class="child" />
</van-badge> </van-badge>
</demo-block> </demo-block>
<demo-block :title="t('customContent')">
<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>
</demo-block>
<demo-block :title="t('standalone')"> <demo-block :title="t('standalone')">
<van-badge content="20" style="margin-left: 16px" />
<van-badge content="200" max="99" style="margin-left: 16px" /> <van-badge content="200" max="99" style="margin-left: 16px" />
</demo-block> </demo-block>
</template> </template>
@ -76,6 +110,7 @@ export default {
.badge-icon { .badge-icon {
display: block; display: block;
margin-left: 0;
font-size: 10px; font-size: 10px;
line-height: 16px; line-height: 16px;
} }

View File

@ -9,6 +9,20 @@ exports[`should render demo and match snapshot 1`] = `
5 5
</div> </div>
</div> </div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
10
</div>
</div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
Hot
</div>
</div>
<div class="van-badge__wrapper"> <div class="van-badge__wrapper">
<div class="child"> <div class="child">
</div> </div>
@ -24,6 +38,13 @@ exports[`should render demo and match snapshot 1`] = `
9+ 9+
</div> </div>
</div> </div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
20+
</div>
</div>
<div class="van-badge__wrapper"> <div class="van-badge__wrapper">
<div class="child"> <div class="child">
</div> </div>
@ -42,6 +63,15 @@ exports[`should render demo and match snapshot 1`] = `
5 5
</div> </div>
</div> </div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed"
style="background: rgb(25, 137, 250);"
>
10
</div>
</div>
<div class="van-badge__wrapper"> <div class="van-badge__wrapper">
<div class="child"> <div class="child">
</div> </div>
@ -52,6 +82,37 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
<i class="van-badge__wrapper van-icon van-icon-success badge-icon">
</i>
</div>
</div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
<i class="van-badge__wrapper van-icon van-icon-cross badge-icon">
</i>
</div>
</div>
<div class="van-badge__wrapper">
<div class="child">
</div>
<div class="van-badge van-badge--fixed">
<i class="van-badge__wrapper van-icon van-icon-down badge-icon">
</i>
</div>
</div>
</div>
<div>
<div class="van-badge"
style="margin-left: 16px;"
>
20
</div>
<div class="van-badge" <div class="van-badge"
style="margin-left: 16px;" style="margin-left: 16px;"
> >