HarmonyOS UI组件在线预览,程序员直呼“不要太方便~”
一、介绍
以往大家如果想查看组件的使用效果,需要打开DevEco Studio构建工程。现在为了便于大家高效开发,文档上线了JS UI组件在线预览功能,无需本地构建工程,在线即可修改组件样式等参数、一键预览编译效果。程序员直呼:简直不要太方便啦!
让我们通过下面这张动图看一下效果~
看完动图,你是不是也跃跃欲试?心动不如行动,复制下方链接,赶紧用起来吧~
JS API参考文档(以Button组件为例):
二、组件功能和开发步骤
目前我们已经上线了5个组件的在线预览功能,分别为Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上线的组件。接下来我们将以Button组件为例,为大家介绍组件的功能和开发步骤。
注:因篇幅有限,此处不再赘述其他组件,大家可自行前往官网查阅(末尾有组件链接哦~)。
1. Button
(1)功能介绍:
Button是按钮组件,用来响应用户的点击操作,类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮和下载按钮。开发者们可以在按钮上绑定事件来响应点击操作后的自定义行为。
在线预览效果(图1):
图1 Button在线预览示例图
(2)开发步骤:
① 首先,在hml文件中创建一个基本的按钮组件(图2),并在css文件中添加样式。
<!-- xxx.hml --> <button class="buttons">按钮</button>
/* xxx.css */ .buttons { margin-top: 15px; width: 45%; height: 45px; text-align: center; font-size: 14px; border-radius: 10px; background-color: #317aff; }
图2 普通按钮效果图
② 接着,将按钮文本更改为Loading(图3),添加waiting属性来显示按钮的等待效果。
<!-- xxx.hml --> <button class="buttons" waiting="true">Loading</button>
图3 加载按钮效果图
③ 最后,为按钮绑定setProgress方法来实时显示下载进度条的进度(图4),同时在js文件中对setProcess方法进行自定义,实现进度条的递增显示效果。
<!-- xxx.hml --> <button class="buttons" id="download-btn" waiting="true" type="download" onclick="setProgress">{{downloadText}}</button>
// xxx.js export default { data: { progress: 10, downloadText: "进度条按钮" }, setProgress(e) { var i=0 var set= setInterval(()=>{ i+=10 this.progress=i this.downloadText = this.progress + "%"; this.$element('download-btn').setProgress({ progress: this.progress }); if(this.progress>=100){ clearInterval(set) this.downloadText="完成" } },1000) } } }
图4 进度条显示效果图
其他组件请复制下方链接,自行前往官网查看:
Input组件:
List组件:
Image组件:
Dialog组件:
三、结语
好了,以上就是本期全部内容,期待大家通过JS UI在线预览实现精美的组件,也欢迎大家持续关注开发者文档上新内容。
大家可以通过官网在线反馈更多意见和需求哦!
扫码添加开发者小助手微信
获取更多HarmonyOS开发资源和开发者活动资讯
- 推荐一个采用方便程序员在线动画学习常用算法的良心网站
- 支持在线预览,方便快捷
- pdf 文档 在线预览
- 【伯乐在线】24岁才开始学编程是否太晚?一位经济学专业女程序员的故事
- JavaScript实现在线Cron表达式生成器、预览工具 -toolfk程序员在线工具网
- 《程序员2007增刊——实战Web2.0》精彩预览之“指导篇”
- Extjs上传附件实战开发,实现批量上传及在线预览功能(二)
- Java程序员不要错过的7款新工具
- owncloud+collabora 实现网盘在线预览
- [Asp.net]常见word,excel,ppt,pdf在线预览方案,有图有真相,总有一款适合你!
- java在线预览txt、word、ppt、execel,pdf代码
- 从程序员到项目经理(十八):不要试图和下属做朋友
- 带进度的多文件上传(支持上传.doc后缀的word文档并在线预览)
- 业务层勿用继承,不要为了方便舍弃了性能。TʌT不好意思我错了
- 真的不要打扰思考中的程序员!
- Web程序员福音:在线测试所有浏览器的兼容性
- 图片在线预览功能实现过程
- 不要做闷骚的程序员
- 文档在线预览(二)-使用JODConverter转换文档为PDF
- 调用office web 365接口实现在线预览word文档,PDF,PPT