1 Star 11 Fork 3

陈乔 / OpenHarmony-JS-Icon

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README_zh.md

OpenHarmony-JS-Icon

本示例基于OpenHarmony下的JavaScript UI框架,通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件,通过本示例可以基本了解和使用该组件。

本项目是基于OpenHarmony项目而不是HarmonyOS项目,请注意运行环境。 请参考OpenHarmony项目配置方法进行项目配置和运行。

如果你不熟悉OpenHarmony的JS开发,请参考该项目的开发讲解

项目介绍

目录

  1. 在Pages目录下,只有一个index首页,在首页中展示了icon自定义组件的使用样例。

  2. 在common文件夹下的icon文件夹是自定义的icon组件,在icon文件夹中js文件夹是icon绘制使用到的方法和数据。

目录.png

使用说明

项目预览

  1. 下载OpenHarmony-JS-Icon项目,启动 DevEco Studio并打开工程。

  2. 进入entry->src->main->js->default->pages->index,打开index.hml。

Previewer.png

Previewer_run.gif

Mate30_run.gif

引入

在index.hml的第一行,引用自定义组件,这里我们将name属性设置为icon。

<element src="../../common/icon/icon.hml" name="icon"></element>

基础用法

通过设置icon组件的name属性来展示不同的图标。

<icon name="chat_o" size="48"></icon>

基础用法.png

角标提示

通过设置icon组件的badge-config属性来对角标信息进行设置。

<icon name="chat_o" size="48" badge-config="{{ badgeConfig }}"></icon>
badgeConfig: {
	config: {
		badgeColor: "#0a59f7",
		textColor: "#ffffff",
	},
	count: 0,
	visible: true,
},

角标提示.png

图标颜色和背景颜色

通过设置icon组件的color属性来设置,background-color可以设置图标的背景颜色。

<icon name="chat_o" size="48" color="#ED6F21" background-color="#ddddddd" ></icon>

图标颜色.png

图标大小

通过设置icon组件的size属性来控制图标的大小。

<icon name="chat_o" size="24"></icon>

图标大小.png

图标禁用

通过设置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>

图片绘制.png

图片绘制

通过设置icon组件的name属性设置为图片的地址。

<icon name="common/images/huawei.png" size="48"></icon>

图片绘制.png

API

props

属性名称 值类型 描述
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: 
		}
    }
}

Events

方法名称 参数 描述
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);
}

执行结果:  图片绘制.png

注意事项

  1. 可以使用角标,使用时需将所有的badge属性作为一个对象用badge-config名称传入,这个用法参考了官方badge组件。

  2. 可以绘制图片,在name属性上设置图片路径,路径必须是绝对路径或者云路径,不能使用"./"或者"../"等开头的相对路径,而且图片尺寸需和icon的size值一样,不然可能会导致绘制不完整,官方有image组件,这个功能有点鸡肋。

  3. 虽然图标颜色可以设置透明色,但是不建议设置透明色,透明色可能会导致部分图标绘制的效果与预期相差较大。

  4. 图标的形式参考了市面上主流的图标形式,全部的图标绘制均为canvas绘制,无任何代码参考,使用的api均为鸿蒙JS UI官方api。

  5. 图标绘制使用的是canvas,虽然在一些特别细节的地方可能还比不上矢量图标清晰度,但是此库理论上可以实现任意图标,大家有需求或者有新的图标需要绘制的请评论留言,谢谢。

  6. 目前图标已绘制了230+,已基本完成计划实现的图标,还会继续更新,敬请关注。

版权和许可信息

OpenHarmony-JS-Icon经过Apache License, version 2.0授权许可。

Repository Comments ( 2 )

Sign in to post a comment

About

基于OpenHarmony下的JavaScript UI框架,通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件 expand collapse
JavaScript and 3 more languages
MulanPSL-2.0
Cancel

Releases

No release

OpenHarmony-JS-Icon

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/chenqiao002/open-harmony-js-icon.git
git@gitee.com:chenqiao002/open-harmony-js-icon.git
chenqiao002
open-harmony-js-icon
OpenHarmony-JS-Icon
master

Search