JS UI组件在线预览功能和开发步骤
一、介绍
以往大家如果想查看组件的使用效果，需要打开deveco studio构建工程。现在为了便于大家高效开发，文档上线了js 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
(2)开发步骤：① 首先，在hml文件中创建一个基本的按钮组件(图2)，并在css文件中添加样式。
按钮button> （左右滑动，查看更多） /* xxx.css */.buttons { margin-top: 15px; width: 45%; height: 45px; text-align: center; font-size: 14px; border-radius: 10px; background-color: #317aff;} ② 接着，将按钮文本更改为loading(图3)，添加waiting属性来显示按钮的等待效果。 loadingbutton>
（左右滑动，查看更多）
③ 最后，为按钮绑定setprogress方法来实时显示下载进度条的进度(图4)，同时在js文件中对setprocess方法进行自定义，实现进度条的递增显示效果。
class=buttons id=download-btn waiting=true type=download onclick=setprogress>{{downloadtext}} （左右滑动，查看更多） // 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) } } } （左右滑动，查看更多）
其他组件请复制下方链接，自行前往官网查看：
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官方合作社区】欢迎添加关注!文章转载请注明出处。
SPI通信的四种方式 FPGA的SPI从机实现方案
基于CompactPCI电路板分析
什么样的测试工程师才算合格
关于虚拟现实革命的10个事实
《回到大婚那一天》收官，随幻科技如何用技术赋能“微短剧”生态
JS UI组件在线预览功能和开发步骤
新能源行业发展提速 威迈斯乘势IPO上市
Quanergy Systems近日发布了一款微型固态LiDAR传感器S3－Qi
INFICON收购FabTime资产
稳压器的作用大吗 稳压器的好处与坏处
用运放驱动简单实用功率放大器,NE5532驱动功率放大电路
电压跟随器电路的电路连接形式是怎样的
上海增强现实技术与应用论坛暨2018EasyAR开发者大会开放报名！ ... ...
迄今最大模型？OpenAI发布参数量高达15亿的通用语言模型GPT-2
中国联通:7部多场景化白皮书,共同开启万物智联时代
基于复杂可编程逻辑器件ATF1508AS实现多入多出系统的设计
微振传感器在安防系统中的应用解析
锂离子电池之三元正极材料
变频器的安装和使用方法
ADI i耦合器技术隔离炉灶和用户界面
以往大家如果想查看组件的使用效果，需要打开deveco studio构建工程。现在为了便于大家高效开发，文档上线了js 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
(2)开发步骤：① 首先，在hml文件中创建一个基本的按钮组件(图2)，并在css文件中添加样式。
按钮button> （左右滑动，查看更多） /* xxx.css */.buttons { margin-top: 15px; width: 45%; height: 45px; text-align: center; font-size: 14px; border-radius: 10px; background-color: #317aff;} ② 接着，将按钮文本更改为loading(图3)，添加waiting属性来显示按钮的等待效果。 loadingbutton>
（左右滑动，查看更多）
③ 最后，为按钮绑定setprogress方法来实时显示下载进度条的进度(图4)，同时在js文件中对setprocess方法进行自定义，实现进度条的递增显示效果。
class=buttons id=download-btn waiting=true type=download onclick=setprogress>{{downloadtext}} （左右滑动，查看更多） // 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) } } } （左右滑动，查看更多）
其他组件请复制下方链接，自行前往官网查看：
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官方合作社区】欢迎添加关注!文章转载请注明出处。
SPI通信的四种方式 FPGA的SPI从机实现方案
基于CompactPCI电路板分析
什么样的测试工程师才算合格
关于虚拟现实革命的10个事实
《回到大婚那一天》收官，随幻科技如何用技术赋能“微短剧”生态
JS UI组件在线预览功能和开发步骤
新能源行业发展提速 威迈斯乘势IPO上市
Quanergy Systems近日发布了一款微型固态LiDAR传感器S3－Qi
INFICON收购FabTime资产
稳压器的作用大吗 稳压器的好处与坏处
用运放驱动简单实用功率放大器,NE5532驱动功率放大电路
电压跟随器电路的电路连接形式是怎样的
上海增强现实技术与应用论坛暨2018EasyAR开发者大会开放报名！ ... ...
迄今最大模型？OpenAI发布参数量高达15亿的通用语言模型GPT-2
中国联通:7部多场景化白皮书,共同开启万物智联时代
基于复杂可编程逻辑器件ATF1508AS实现多入多出系统的设计
微振传感器在安防系统中的应用解析
锂离子电池之三元正极材料
变频器的安装和使用方法
ADI i耦合器技术隔离炉灶和用户界面