初学鸿蒙OS之JS-UI框架中基础组件的使用

简介: 初学鸿蒙OS之JS-UI框架中基础组件的使用

写在前面


昨天我们一起学习了鸿蒙OS中提供的JS-UI框架中的组件分类,并且在各个分类中,都有哪些比较常用,或者是比较熟悉的组件,但是并没有学如何去用这些组件。


那么今天我们就来看一下如何去用这些组件吧,当然也是一些基本组件的使用,博主刚学不久,质量确实没那么高,但是请相信博主,鸿蒙OS会一直学习下去的。


如何在项目中使用基础组件


今天主要是来说一下JS-UI框架中的一些基础组件,比如input、text这些我们耳熟能详的组件元素。


代码的编写,还是在之前演示Demo上进行编写。


input


第一个就是input了,输入框,对于前端同学,甚至是所有开发人员,都不会太陌生,输入框组件,非常容易理解。


代码使用:


在index.html中输入以下代码:


<input type="text" value="这里是输入框"></input>
<input type="radio" name="abc" value="1">1</input>
<input type="radio" name="abc" value="2">2</input>
<input type="date" value="这里是时间"></input>


运行一下,我们就会得到如下图:

image.png

select & option


select和option是我们常常使用的下拉框,在鸿蒙OS中也可以通过代码来实现,和html一样的使用方式。


<select id="name">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>


运行结果如下图所示:

image.png

text


文本展示标签,代码如下:


<text>这是一个文本展示标签</text>


运行结果如下图所示:

image.png

button


button按钮,其实我们在之前是用过的。


<button class="button" type="capsule" value="Next"></button>


运行结果如下图所示:

image.png

总结


今天熟悉了一些组件,是不是对鸿蒙OS的了解又多了一些呢,慢慢来,总会熟练的。


相关文章
|
4月前
|
Linux 虚拟化 iOS开发
VMware Tools 13.0 正式版发布下载 - 客户机操作系统无缝交互必备组件
VMware Tools 13.0 正式版发布下载 - 客户机操作系统无缝交互必备组件
470 1
VMware Tools 13.0 正式版发布下载 - 客户机操作系统无缝交互必备组件
|
5月前
|
传感器 人工智能 物联网
HarmonyOS NEXT~鸿蒙操作系统功耗优化特性深度解析
本文深入解析了华为鸿蒙(HarmonyOS)操作系统的功耗优化特性,涵盖低功耗设计原理、核心技术及实际应用效果。通过与Android对比,展现其在待机功耗、CPU调度效率和内存占用上的优势。文章重点阐述分布式任务调度、微内核架构及智能感知技术,并针对智能穿戴、物联网和智能手机等场景优化进行分析,同时为开发者提供优化建议。未来,鸿蒙将探索AI预测性管理等新技术,进一步提升能效表现。
809 30
|
1月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
181 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
16天前
|
安全 Linux 虚拟化
VMware Tools 13.0.5.0 发布 - 客户机操作系统无缝交互必备组件
VMware Tools 13.0.5.0 发布 - 客户机操作系统无缝交互必备组件
230 4
|
16天前
|
安全 Linux 虚拟化
VMware Tools 12.5.4 下载 - 客户机操作系统无缝交互必备组件
VMware Tools 12.5.4 下载 - 客户机操作系统无缝交互必备组件
115 3
|
1月前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上,主要扩展了声明式UI开发相关的能力。
|
3月前
|
安全 Linux 虚拟化
VMware Tools 13.0.1.0 发布 - 客户机操作系统无缝交互必备组件
VMware Tools 13.0.1.0 发布 - 客户机操作系统无缝交互必备组件
279 1
VMware Tools 13.0.1.0 发布 - 客户机操作系统无缝交互必备组件
|
5月前
|
人工智能 芯片 开发者
鸿蒙电脑的诞生是国产操作系统的破壁之战
鸿蒙电脑的诞生标志着国产操作系统的重大突破。在Windows和Mac OS主导的市场中,华为凭借“全栈自研+分布式架构+系统级AI”创新组合,推出搭载HarmonyOS 5的HUAWEI MateBook Fold与MateBook Pro,实现从底层内核到用户体验的完全自主可控。作为混沌初开的“鸿蒙”,不仅补齐了华为“1+8+N”生态拼图,更开启了中国科技自立自强的新篇章。尽管生态建设仍在起步阶段,但已为全球电脑操作系统市场带来新格局。开发者可通过掌握ArkTS语言、利用分布式能力、参与开源项目等方式,抓住这一历史性机遇。
262 30
鸿蒙电脑的诞生是国产操作系统的破壁之战
|
3月前
|
安全 Linux 虚拟化
VMware Tools 12.5.3 发布 - 客户机操作系统无缝交互必备组件
VMware Tools 12.5.3 发布 - 客户机操作系统无缝交互必备组件
239 0
VMware Tools 12.5.3 发布 - 客户机操作系统无缝交互必备组件

热门文章

最新文章

推荐镜像

更多