原文:https://mp.weixin.qq.com/s/ByxCMvtxaNuKI_6cXgtLBg,点击链接查看更多技术内容。

Playground自上线以来,得到了广大开发者的一致好评。特别是它的ArkUI JS组件在线预览功能,不但可以从中学习基础组件的使用,还可以在线体验一键预览的编译效果。

通过Playground在线体验,从前没有接触过编程的小白也可以分分钟掌握开发!近期,Playground中ArkUI JS组件在线预览又有更新啦~

以下为本次新增组件一览:

● tabs:页签

● stepper:步骤导航器

● text:文本

● form:表单

● picker:选择器

● toolBar:工具栏

● menus:菜单

迫不及待想体验的开发者们,欢迎即刻上手~

一、访问方式及界面介绍

ArkUI JS组件在线预览有两种访问方式,其内容完全相同,可根据您的习惯进行选择(以tabs组件为例)。

1. 通过“JS API参考”文档访问

ArkUI JS组件在线预览目前已经嵌入在对应组件的文档中,文档整体由两部分组成:第一部分为该组件的功能介绍,第二部分为示例代码的在线预览界面。开发者们可直接在文档页面了解组件的使用方式,学习示例代码的实现方法

图1 文档访问tabs组件界面

文档访问链接:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000001281480666

2. 通过Playground平台访问

Playground在线预览界面左侧为代码区、右侧为预览区。开发者们通过修改左侧HML、CSS、JS语言代码,即可实现快速开发、一键编译。

如下图1所示:①区域为可实现在线预览的组件案例场景,②区域为组件示例代码查看与编辑区域,③区域为预览区。

图2 Playground平台访问

Playground平台访问链接:

https://playground.harmonyos.com/#/cn/onlineDemo/demo/jsUI/tabs

二、在线预览操作示例

在线预览界面中:当修改组件示例代码后,点击即可一键预览修改后的组件效果;点击

即可一键重置。

图3 在线预览界面

操作是不是超简单、易上手~下面以tabs(页签)组件作为示例,给大家展开说明介绍。

1. tabs组件功能介绍:

tabs组件是一种可以通过页签进行内容视图切换的容器组件,被广泛用于应用界面。通过添加tabs组件中的vertical属性(false上下排列、true左右排列),可实现“横向展示”与“纵向展示”。

图4 tabs组件“横向展示”预览

图5 tabs组件“纵向展示”预览

在tabs组件中,tab-bar子组件用来展示页签区,tab-content子组件用来展示内容区。

注:如下图所示,每个标签对应一个内容视图。

图6 子组件对应视图

我们可以直接在线编辑HML模板文件及CSS样式文件,来修改当前页面的文件布局结构以及页面样式。

以上就是本期内容。目前Playground已上线共12个超级实用的ArkUI JS组件,除了本次示例的tabs(页签)外,其他组件介绍可前往官网查看:

容器组件:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-badge-0000001281480658

更多有趣的Playground在线体验等你来哟!

编程小白也能快速掌握的ArkUI JS组件开发的更多相关文章

  1. 编程小白入门分享五:Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  2. 小白学习vue第五天(理解使用组件开发,组件第一弹)

    组件怎么从创建到使用? 第一步创建组件构造器对象 感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似 const cpnC = Vue.extend({ template: ` <d ...

  3. 一个编程小白,如何入门APP软件开发领域?

    近些年,互联网创业火得不得了!一时间,满世界都在招做App软件开发的专业人员.从大众角度来看,学编程,写代码,是一件非常困难的事情.但是,App开发人员的工资那么诱人,让很多小白也跃跃欲试想学一下.那 ...

  4. 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  5. 读书笔记:编程小白的第一本python入门书

    书名:编程小白的第一本python入门书 作者:侯爵 出版社/出处:图灵社区 年份:2016年 封面: 感想: 本书短小精悍,精华部分在于给编程小白打了鸡血的同时输出了一种“高效学习法的思想”. 个人 ...

  6. “编程小白学python”阅读笔记

    今天在豆瓣搜索“python”关键字,搜到一本知乎周刊,读来觉得不错 编程小白学python ,作者@萧井陌, @Badger 书中提到的很多书,第一次看惊呆了,记录下来,希望每周回看此博文,坚持学习 ...

  7. 2个月,我从编程小白成为了Python研发工程师

    从编程小白,到Python研发工程师,需要多久呢? 答案就是:91门课,450个小时. 听起来似乎难以实现,但其实如果每天抽出八小时学习,两个月的时间,就能由编程小白转变成为Python工程师,听起来 ...

  8. 编程小白的第一本python入门书电子版|百度网盘分享无偿获取|评分超高的python教材

    点此进入网盘下载提取码:cr74 为了能让更多的编程小白轻松地入门编程,把高效学习法结合 Python 中的核心知识,写成了这本书.随意翻上几页,你就会发现这本书和其他编程书的不同,其中有大量的视觉化 ...

  9. 快速全面了解QT软件界面开发技术

    快速全面了解QT软件界面开发技术     目录 前言 一. 学习QT可能的目的是什么? 只想体验一下QT? 当前的项目选择了用QT. 为将来做QT技术储备. 二. QT的核心技术优势是什么? QT在软 ...

  10. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

随机推荐

  1. 四种色彩模式ARGB_8888、ARGB_4444、 RGB_565、 ALPHA_8

    A:透明度. R:红色. G:绿色. B:蓝色. Bitmap.Config ARGB_8888:有四个8位组成,A,R,G,B各占八位,也就是各占一个字节.也就是一个像素点占4个字节,32位. Bi ...

  2. 一文学会JDBC实现java和mySQL的数据连接(尚硅谷学习课程代码+笔记+思路总结)

    JDBC是指数据库连接技术,用于java连接mySQL等数据库.本文详细介绍了尚硅谷课程中JDBC的学习内容和补充知识. 概述 java语言只提供规范接口,存在于java.sql.javax.sql包 ...

  3. vue3 markdown 读取文件的两种方法 有gitee发布地址

    方法一: markdown-loader html-loader import的时候就转换成html了,每次需要build,但是可以本地双击就能看,放哪个目录页不限制 方法二: axios + mar ...

  4. gRPC入门学习之旅(二)

    gRPC入门学习之旅(一) gRPC是一个高性能.通用的开源远程过程调用(RPC)框架,基于底层HTTP/2协议标准和协议层Protobuf序列化协议开发,支持众多的开发语言,由Google开源. g ...

  5. 《TencentNCNN系列》 之bin文件(网络参数文件)格式分析

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  6. PAT 甲级1008【1008 Elevator】

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  7. 【Unity 3D游戏开发】在Unity使用NoSQL数据库方法介绍

    随着游戏体积和功能的不断叠加,游戏中的数据也变得越来越庞杂,这其中既包括玩家产生的游戏存档等数据,例如关卡数.金币等,也包括游戏配置数据,例如每一关的配置情况.尽管Unity提供了PlayerPref ...

  8. Linux快速入门(七)效率工具(Vim)

    Vim编辑器 所有的Linux系统都会内建一个Vi文本编辑器,而Vim是从Vi发展出来的一个高度可配置的文本编辑器,旨在高效的创建和更改任何类型的文本,它还可以根据文件的扩展名判别编程语言. 使用方式 ...

  9. 工作记录:TypeScript从入门到项目实战(项目篇)

    Vue项目中使用 前面两篇介绍过TypeScript基础和较深入的东西,本章介绍如何在Vue项目中使用. 项目创建 创建项目直接使用Vue-cli创建 下面是步骤: 1.运行vuecli, 2.选择合 ...

  10. 记录--Vue3 + Fabricjs 定制国庆专属头像

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 生在国旗下,长在春风里!国庆将至,采黎为大家带来 定制头像2.0(国庆头像),让我们用代码的形式为祖国庆生!欢迎大家点赞收藏加关注哦 前言 ...