Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
6414002d
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3594
Star
108
Fork
920
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
108
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
108
合并请求
108
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
6414002d
编写于
8月 09, 2024
作者:
Dcloud_UNI_yuhe
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update uni-badge.md
上级
8b969e6a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
112 addition
and
113 deletion
+112
-113
docs/component/uniui/uni-badge.md
docs/component/uniui/uni-badge.md
+112
-113
未找到文件。
docs/component/uniui/uni-badge.md
浏览文件 @
6414002d
::: 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|
norma
l |Badge 大小,可取值:normal、small|
|size|String|
smal
l |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
:
20
rpx
;
<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
:
20
rpx
;
}
/* #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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录