badge组件

用途：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。

简单说就是消息提醒

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	不支持	不支持

子组件

支持单个子组件。

说明

仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
placement	string	rightTop	否	事件提醒的数字标记或者圆点标记的位置，可选值为： right：位于组件右边框。 rightTop：位于组件边框右上角。 left：位于组件左边框。
count	number	0	否	设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。说明当数字设置为大于maxcount时，将使用maxcount显示。 count属性最大支持整数值为2147483647。
visible	boolean	false	否	是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。
maxcount	number	99	否	最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。说明 maxcount属性最大支持整数值为2147483647。
config	BadgeConfig	-	否	设置新事件标记相关配置属性。
label6+	string	-	否	设置新事件提醒的文本值。说明使用该属性时，count和maxcount属性不生效。

表1 BadgeConfig
名称	类型	默认值	必填	描述
badgeColor	<color>	#fa2a2d	否	新事件标记背景色。
textColor	<color>	#ffffff	否	数字标记的数字文本颜色。
textSize	<length>	10px	否	数字标记的数字文本大小。
badgeSize	<length>	6px	否	圆点标记的默认大小

样式

支持通用样式。

说明

badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。

代码样例

HTML

<div id="div9"><image id="image8" src="common/images/fk.png"></image><image id="image9" src="common/images/fh.png"></image><badge class="badge" config="{{badgeconfig}}" visible="true" count="45" maxcount="99"><image id="image10" src="common/images/sh.png"></image></badge><image id="image11" src="common/images/pj.png"></image></div>

css

.badge {width: 41px;//宽高要大于子组件height: 41px;placement:rightTop
}

js

export default {data: {title: "Hello World","badgeconfig":{"badgeColor":"#0a59f7","textColor":"#ffffff"}},
}

效果图

、

5.3-badge组件相关推荐

微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
vue实现消息badge 标记_一天一个 Element 组件 - Badge
本文是 Element 的组件源码学习系列. Badge 组件使用文档:badge 标记 Props 我们先来看一下 el-badge 这个组件的入参 props: { value: [String, ...
openharmony容器组件之Badge
Badge:新事件标记组件,在组件上提供事件信息展示能力 Badge(value: {count: number, position?: BadgePosition, maxCount?: numbe ...
vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否
Badge组件主要用于数字或状态的标记,对于消息类的提醒功能,使用这组件还是很常见的.具体显示效果如下图: 不管组件复杂还是简单,编码实现这个组件的都不是源码分析目的. 源码分析,在于通过一步步的实现 ...
bootstrap4-badge徽章组件
css 样式概览 CSS 类描述 .badge 必选,默认,方体形状 .badge-pill 药丸形状 .badge-success 深蓝色 .badge-secondary 深灰色 .badge- ...
Ionic 2 Beta 11 升级 RC 0 的坑 (update: RC 1 已经出来了，稍微没那么坑一点点)
已经按照官方更新指南 (中文翻译见 https://segmentfault.com/a/11... ) 更新完毕的情况下,仍然可能遇到很多坑,不确定何时可以跳出... 所有组件的类需要在 app.m ...
15. 徽章和面包屑导航
1.徽章 (Badge)   <h1>zsp ...
使用uniapp开发社区交友网站的项目教程
uniapp社区交友开发前端模块开发源码可以提供下载,详情访问末尾码云地址环境搭建和创建项目开发环境搭建使用HubilderX 安装对应插件创建uniapp项目创建项目(名称:社区交友) ...
快照测试_什么是快照测试，并且在PHP中可行？
快照测试 This article was peer reviewed by Matt Trask, Paul M. Jones, and Yazid Hanifi. Thanks to all of ...

5.3-badge组件

badge组件

支持设备

子组件

属性

样式

代码样例

HTML

css

js

效果图

5.3-badge组件相关推荐

最新文章

热门文章