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/demo/index.vue
+45 -3
View File
@@ -4,6 +4,12 @@
<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>
@@ -13,6 +19,9 @@
<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>
@@ -22,13 +31,38 @@
<van-badge content="5" :color="BLUE">
<div class="child" />
</van-badge>
<van-badge content="10" :color="BLUE">
<div class="child" />
</van-badge>
<van-badge dot :color="BLUE">
<div class="child" />
</van-badge>
</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')">
<van-badge content="200" max="99" style="margin-left: 16px;" />
<van-badge content="20" style="margin-left: 16px;" />
<van-badge content="200" max="99" style="margin-left: 12px;" />
</demo-block>
</demo-section>
</template>
@@ -42,11 +76,13 @@ export default {
max: '最大值',
standalone: '独立展示',
customColor: '自定义颜色',
customContent: '自定义徽标内容',
},
'en-US': {
max: 'Max',
standalone: 'Standalone',
customColor: 'Custom Color',
customContent: 'Custom Content',
},
},
@@ -69,10 +105,16 @@ export default {
}
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: @gray-2;
border-radius: 4px;
}
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
}
</style>