UI组件在线预览,程序员直呼“不要太方便~” 原创

发布于 2022-3-10 11:26
浏览
0收藏

 

一、介绍


以往大家如果想查看组件的使用效果,需要打开DevEco Studio构建工程。现在为了便于大家高效开发,文档上线了JS UI组件在线预览功能,无需本地构建工程,在线即可修改组件样式等参数、一键预览编译效果。程序员直呼:简直不要太方便啦!

 

让我们通过下面这张动图看一下效果~

 

UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区

看完动图,你是不是也跃跃欲试?心动不如行动,复制下方链接,赶紧用起来吧~ 

 

JS API参考文档(以Button组件为例):

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

 

二、组件功能和开发步骤


目前我们已经上线了5个组件的在线预览功能,分别为Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上线的组件。接下来我们将以Button组件为例,为大家介绍组件的功能和开发步骤。 

 

注:因篇幅有限,此处不再赘述其他组件,大家可自行前往官网查阅(末尾有组件链接哦~)。 

 

1. Button


(1)功能介绍:

 

Button是按钮组件,用来响应用户的点击操作,类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮和下载按钮。开发者们可以在按钮上绑定事件来响应点击操作后的自定义行为。 

 

在线预览效果(图1):

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

 

UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区图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;
}

 

UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区图2 普通按钮效果图

 

② 接着,将按钮文本更改为Loading(图3),添加waiting属性来显示按钮的等待效果。 

 

<!-- xxx.hml --> 
<button class="buttons" waiting="true">Loading</button>

 

UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区图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) 
 } 
}                      }


UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区图4 进度条显示效果图

 

其他组件请复制下方链接,自行前往官网查看:

Input组件: 

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673#section1853220587610 

List组件: 

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496#section1853220587610 

Image组件: 

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597#section1853220587610 

Dialog组件: 

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-dialog-0000001050068157#section1853220587610 

 

三、结语


好了,以上就是本期全部内容,期待大家通过JS UI在线预览实现精美的组件,也欢迎大家持续关注开发者文档上新内容。

 

大家可以通过官网在线反馈更多意见和需求哦!

 

 

UI组件在线预览,程序员直呼“不要太方便~”-开源基础软件社区

扫码添加开发者小助手微信  

获取更多HarmonyOS开发资源和开发者活动资讯

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐