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

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan
2020-12-01 10:12:54 +08:00
parent d0c4c26d75 b57f7e9d98
commit 28afc8a521
48 changed files with 259 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/badge/README.md
+59 -11
View File
@@ -15,7 +15,13 @@ app.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>
@@ -24,8 +30,8 @@ app.use(Badge);
<style>
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
@@ -35,10 +41,13 @@ app.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>
```
@@ -46,7 +55,10 @@ app.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">
@@ -54,10 +66,45 @@ app.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
@@ -73,9 +120,10 @@ app.use(Badge);
### Slots
| Name | Description |
| ------- | ------------ |
| default | Default slot |
| Name | Description |
| ------- | -------------------- |
| default | Default slot |
| content | Custom badge content |
### Less Variables