mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Badge): add content slot demo (#7647)
* docs(Badge): add content slot demo * docs: fix content
This commit is contained in:
neverland
GitHub
parent
1855cffeb2
commit
38c4f506e7
@ -14,7 +14,13 @@ Vue.use(Badge);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-badge content="5">
|
||||
<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>
|
||||
@ -23,8 +29,8 @@ Vue.use(Badge);
|
||||
|
||||
<style>
|
||||
.child {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f2f3f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -34,10 +40,13 @@ Vue.use(Badge);
|
||||
### Max
|
||||
|
||||
```html
|
||||
<van-badge content="20" max="9">
|
||||
<van-badge :content="20" max="9">
|
||||
<div class="child" />
|
||||
</van-badge>
|
||||
<van-badge content="200" max="99">
|
||||
<van-badge :content="50" max="20">
|
||||
<div class="child" />
|
||||
</van-badge>
|
||||
<van-badge :content="200" max="99">
|
||||
<div class="child" />
|
||||
</van-badge>
|
||||
```
|
||||
@ -45,7 +54,10 @@ Vue.use(Badge);
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-badge content="5" color="#1989fa">
|
||||
<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">
|
||||
@ -53,10 +65,45 @@ Vue.use(Badge);
|
||||
</van-badge>
|
||||
```
|
||||
|
||||
### Standaline
|
||||
### Custom Content
|
||||
|
||||
Use `content` slot to custom :content of badge.
|
||||
|
||||
```html
|
||||
<van-badge content="200" max="99" />
|
||||
<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;
|
||||
}
|
||||
```
|
||||
|
||||
### Standalone
|
||||
|
||||
```html
|
||||
<van-badge :content="20" />
|
||||
|
||||
<van-badge :content="200" max="99" />
|
||||
```
|
||||
|
||||
## API
|
||||
@ -72,9 +119,10 @@ Vue.use(Badge);
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| default | Default slot |
|
||||
| Name | Description |
|
||||
| ------- | -------------------- |
|
||||
| default | Default slot |
|
||||
| content | Custom badge content |
|
||||
|
||||
### Less Variables
|
||||
|
||||
|
||||
@ -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" />
|
||||
```
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -7,6 +7,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed">5</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="child"></div>
|
||||
<div class="van-badge van-badge--dot van-badge--fixed"></div>
|
||||
@ -17,6 +25,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed">9+</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="child"></div>
|
||||
<div class="van-badge van-badge--fixed">99+</div>
|
||||
@ -27,13 +39,35 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed" style="background: rgb(25, 137, 250);">5</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="child"></div>
|
||||
<div class="van-badge van-badge--dot van-badge--fixed" style="background: rgb(25, 137, 250);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-badge" style="margin-left: 16px;">99+</div>
|
||||
<div class="van-badge__wrapper">
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-badge__wrapper">
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-cross">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-badge__wrapper">
|
||||
<div class="child"></div>
|
||||
<div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-down">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-badge" style="margin-left: 16px;">20</div>
|
||||
<div class="van-badge" style="margin-left: 12px;">99+</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user