提交 6414002d 编写于 作者: Dcloud_UNI_yuhe's avatar Dcloud_UNI_yuhe

Update uni-badge.md

上级 8b969e6a
::: tip 组件名:uni-badge ::: tip 组件名:uni-badge
> 代码块: `uBadge` > 代码块: `uBadge`
...@@ -34,7 +33,7 @@ ...@@ -34,7 +33,7 @@
|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|
|text|String|-|角标内容| |text|String|-|角标内容|
|type|String|default|颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色)| |type|String|default|颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色)|
|size|String|normal |Badge 大小,可取值:normal、small| |size|String|small |Badge 大小,可取值:normal、small|
|is-dot|Boolean|false|不展示数字,只有一个小点| |is-dot|Boolean|false|不展示数字,只有一个小点|
|max-num|String/Numbuer|99|展示封顶的数字值,超过 99 显示99+| |max-num|String/Numbuer|99|展示封顶的数字值,超过 99 显示99+|
|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法| |custom-style|Object|{}|自定义 Badge 样式, 样式对象语法|
...@@ -59,118 +58,118 @@ ...@@ -59,118 +58,118 @@
:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge :::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
```html ```html
<template> <template>
<view class="container"> <view class="container">
<uni-card is-full :is-shadow="false"> <uni-card is-full :is-shadow="false">
<text class="uni-h6">数字角标通用来标记重点信息使用,如接受到新消息、有未读消息等</text> <text class="uni-h6">数字角标通用来标记重点信息使用,如接受到新消息、有未读消息等</text>
</uni-card> </uni-card>
<uni-section title="基础用法" type="line" padding> <uni-section title="基础用法" type="line" padding>
<view class="example-body"> <view class="example-body">
<uni-badge class="uni-badge-left-margin" text="1" /> <uni-badge class="uni-badge-left-margin" text="1" />
<uni-badge class="uni-badge-left-margin" text="2" type="primary" /> <uni-badge class="uni-badge-left-margin" text="2" type="primary" />
<uni-badge class="uni-badge-left-margin" text="34" type="success" /> <uni-badge class="uni-badge-left-margin" text="34" type="success" />
<uni-badge class="uni-badge-left-margin" text="45" type="warning" /> <uni-badge class="uni-badge-left-margin" text="45" type="warning" />
<uni-badge class="uni-badge-left-margin" text="123" type="info" /> <uni-badge class="uni-badge-left-margin" text="123" type="info" />
</view> </view>
</uni-section>
<uni-section title="无底色" type="line" padding>
<view class="example-body">
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
</view>
</uni-section>
<uni-section title="自定义样式" type="line" padding>
<view class="example-body">
<uni-badge class="uni-badge-left-margin" text="2" type="primary"
:customStyle="{background: '#4335d6'}" />
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
</view>
</uni-section>
<uni-section title="定位: aboslute 属性" subTitle="注:在安卓端不支持 nvue" type="line" padding>
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
<view class="box"><text class="box-text">右上</text></view>
</uni-badge>
</uni-section>
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
<view class="box"><text class="box-text">右上</text></view>
</uni-badge>
</uni-section>
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
<view class="box"><text class="box-text">圆点</text></view>
</uni-badge>
</uni-section> </uni-section>
<uni-section title="无底色" type="line" padding> </view>
<view class="example-body"> </template>
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" /> <script>
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" /> export default {
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" /> components: {},
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" /> data() {
</view> return {
</uni-section> value: 0,
customStyle: {
<uni-section title="自定义样式" type="line" padding> backgroundColor: '#62ed0d',
<view class="example-body"> color: '#fff'
<uni-badge class="uni-badge-left-margin" text="2" type="primary" }
:customStyle="{background: '#4335d6'}" /> };
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" /> },
</view> mounted() {
</uni-section> const timer = setInterval(() => {
if (this.value >= 199) {
<uni-section title="定位: aboslute 属性" subTitle="注:在安卓端不支持 nvue" type="line" padding> clearInterval(timer)
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small"> return
<view class="box"><text class="box-text">右上</text></view> }
</uni-badge> this.value++
</uni-section> }, 100)
}
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding> };
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small"> </script>
<view class="box"><text class="box-text">右上</text></view>
</uni-badge> <style lang="scss">
</uni-section> /* #ifdef MP-ALIPAY */
<uni-section title="仅显示点: is-dot 属性" type="line" padding> .uni-badge {
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small"> margin-left: 20rpx;
<view class="box"><text class="box-text">圆点</text></view> }
</uni-badge>
</uni-section> /* #endif */
</view> .example-body {
</template> flex-direction: row;
justify-content: flex-start;
<script> }
export default {
components: {}, .uni-badge-left-margin {
data() { margin-left: 10px;
return { }
value: 0,
customStyle: { .uni-badge-absolute {
backgroundColor: '#62ed0d', margin-left: 40px;
color: '#fff' }
}
}; .box {
}, width: 40px;
mounted() { height: 40px;
const timer = setInterval(() => { display: flex;
if (this.value >= 199) { justify-content: center;
clearInterval(timer) align-items: center;
return text-align: center;
} background-color: #DCDFE6;
this.value++ color: #fff;
}, 100) font-size: 12px;
} }
};
</script> .box-text {
text-align: center;
<style lang="scss"> color: #fff;
/* #ifdef MP-ALIPAY */ font-size: 12px;
.uni-badge { }
margin-left: 20rpx;
}
/* #endif */
.example-body {
flex-direction: row;
justify-content: flex-start;
}
.uni-badge-left-margin {
margin-left: 10px;
}
.uni-badge-absolute {
margin-left: 40px;
}
.box {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #DCDFE6;
color: #fff;
font-size: 12px;
}
.box-text {
text-align: center;
color: #fff;
font-size: 12px;
}
</style> </style>
::: :::
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册