本示例基于OpenHarmony下的JavaScript UI框架,通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件,通过本示例可以基本了解和使用该组件。
本项目是基于OpenHarmony项目而不是HarmonyOS项目,请注意运行环境。 请参考OpenHarmony项目配置方法进行项目配置和运行。
如果你不熟悉OpenHarmony的JS开发,请参考该项目的开发讲解。
在Pages目录下,只有一个index首页,在首页中展示了icon自定义组件的使用样例。
在common文件夹下的icon文件夹是自定义的icon组件,在icon文件夹中js文件夹是icon绘制使用到的方法和数据。
下载OpenHarmony-JS-Icon项目,启动 DevEco Studio并打开工程。
进入entry->src->main->js->default->pages->index,打开index.hml。
在index.hml的第一行,引用自定义组件,这里我们将name属性设置为icon。
<element src="../../common/icon/icon.hml" name="icon"></element>
通过设置icon组件的name属性来展示不同的图标。
<icon name="chat_o" size="48"></icon>
通过设置icon组件的badge-config属性来对角标信息进行设置。
<icon name="chat_o" size="48" badge-config="{{ badgeConfig }}"></icon>
badgeConfig: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
count: 0,
visible: true,
},
通过设置icon组件的color属性来设置,background-color可以设置图标的背景颜色。
<icon name="chat_o" size="48" color="#ED6F21" background-color="#ddddddd" ></icon>
通过设置icon组件的size属性来控制图标的大小。
<icon name="chat_o" size="24"></icon>
通过设置icon组件的disabled属性控制图标是否禁用,disabled默认为false,禁用状态设置为true时图标为灰色,color和badge-config属性只有在disabled为false时生效。
<icon name="chat_o" disabled="true" onclick="iconClick" color="red" size="48" badge-config="{{ badgeConfig }}"></icon>
通过设置icon组件的name属性设置为图片的地址。
<icon name="common/images/huawei.png" size="48"></icon>
属性名称 | 值类型 | 描述 |
---|---|---|
name | String | icon 名称 |
class-prefix | String | icon 样式前缀(目前无效果) |
size | Number | icon 尺寸,默认大小24px,元素是一个正方形 |
color | String | icon 颜色,默认#333333,可以使用16进制和rgba |
background-color | String | icon 背景颜色,默认#FFFFFF,可以使用16进制和rgba |
badge-config | Object | icon 角标配置,详细配置参考官方文档 |
disabled | Boolean | icon 禁用配置,默认false |
dataClick | any | icon 自定义点击事件绑定数据,默认为null |
代码示例:
export default {
props: {
// icon 名称
name: {
default: ''
},
// icon 样式前缀
classPrefix: {
default: 'hos-icon'
},
// icon 尺寸
size: {
default: 24,
},
// icon 颜色
color: {
default: "#333333"
},
// icon 背景颜色
backgroundColor: {
default: "#ffffff"
},
// 角标配置
badgeConfig: {
default: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
placement: "rightTop",
count: 0,
maxcount: 99,
visible: false,
label: "",
}
},
// icon 图标禁用
disabled: {
default: false
},
// icon 点击方法携带的参数
dataClick: {
default:
}
}
}
方法名称 | 参数 | 描述 |
---|---|---|
click | dataClick | 自定义的点击事件调用方法,默认参数为null,在disabled属性为true的时候不会触发此方法 |
代码示例:
hml文件,icon组件绑定点击事件和绑定点击实现参数:
<icon name="fail" size="48" onclick="iconClick" data-click="点击fail图标" ></icon>
js文件,在iconClick方法上接收参数的detail属性为绑定的数据:
iconClick(data) {
console.log("iconClick");
console.log(data.detail);
}
执行结果:
可以使用角标,使用时需将所有的badge属性作为一个对象用badge-config名称传入,这个用法参考了官方badge组件。
可以绘制图片,在name属性上设置图片路径,路径必须是绝对路径或者云路径,不能使用"./"或者"../"等开头的相对路径,而且图片尺寸需和icon的size值一样,不然可能会导致绘制不完整,官方有image组件,这个功能有点鸡肋。
虽然图标颜色可以设置透明色,但是不建议设置透明色,透明色可能会导致部分图标绘制的效果与预期相差较大。
图标的形式参考了市面上主流的图标形式,全部的图标绘制均为canvas绘制,无任何代码参考,使用的api均为鸿蒙JS UI官方api。
图标绘制使用的是canvas,虽然在一些特别细节的地方可能还比不上矢量图标清晰度,但是此库理论上可以实现任意图标,大家有需求或者有新的图标需要绘制的请评论留言,谢谢。
目前图标已绘制了230+,已基本完成计划实现的图标,还会继续更新,敬请关注。
OpenHarmony-JS-Icon经过Apache License, version 2.0授权许可。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型