初学鸿蒙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的了解又多了一些呢,慢慢来,总会熟练的。


相关文章
|
24天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
15 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
22 0
|
1月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
18 0
|
1月前
|
JavaScript
Vue.js 修饰符:精准控制组件行为
Vue.js 修饰符:精准控制组件行为
|
1月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
51 0
N..
|
1月前
|
JavaScript 前端开发 测试技术
Vue.js的组件
Vue.js的组件
N..
14 1
|
1月前
|
Linux API Android开发
Airtest UI自动化框架 v1.1.4
Airtest UI自动化框架 v1.1.4
30 3
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
1月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
89 0
|
2月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
32 1