35 行
1.9 KiB
Markdown
35 行
1.9 KiB
Markdown
badge角标，可以用于显示红点、被红圈或其他颜色圈包裹的数字、文字。提醒用户此时有需要注意的新信息。
|
||
|
||
### 文件路径
|
||
项目下有一个 /pages/uni-ui/badge/badge.uvue 页面，里面演示了badge组件的各种用法。
|
||
|
||
### 设计
|
||
#### badge组件有多种用法：
|
||
1. 独立显示
|
||
如果没有slot内容，视为要显示独立的红点和数字，此时不是角标，就是普通的红点和圆背景数字。
|
||
在按钮或列表项的右侧，独立显示数字。也可以显示红点，但这种场景数字更多一些。
|
||
|
||
2. 作为一个容器组件，包含一个slot，在包裹内容的右上角显示一个角标view。
|
||
badge组件包裹一个目标view时，badge组件内部的角标view的中心点位于目标view的右上角顶点。
|
||
此时角标view是通过transform位移到右上角的，实际内容已经超出了容器本身。
|
||
所以需要注意容器的父级的设置，留出超出容器的尺寸（即top和right边距需要留出角标view的高度和宽度的一半），避免被父级裁剪。
|
||
|
||
#### badge的text属性的用法：
|
||
在badge作为容器组件时，text属性的不同设置，可以代表不同的效果。具体见属性章节。
|
||
|
||
#### 样式自定义
|
||
badge组件的badge-class和badge-style属性，直接作用在角标view上，可以修改角标view的样式。
|
||
|
||
角标view本质是一个text组件，可以覆盖前景、背景、位置等各种样式。
|
||
|
||
#### badge组件有如下属性：
|
||
- text
|
||
类型为 string|null
|
||
* 值为"0"时，不显示角标；所以永远不会显示一个为0的角标。此时直接显示slot子内容，不包裹外层，减少层级，提高性能；
|
||
* 值为null或""时，代表一个长宽为8px的红色圆点；
|
||
* 否则显示为该文字内容的圆角红底圈套文字。
|
||
- badge-class
|
||
直接作用于角标view的class
|
||
- badge-style
|
||
直接作用于角标view的style
|