写在前面
昨天我们一起学习了鸿蒙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>
运行一下,我们就会得到如下图:
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>
运行结果如下图所示:
text
文本展示标签,代码如下:
<text>这是一个文本展示标签</text>
运行结果如下图所示:
button
button按钮,其实我们在之前是用过的。
<button class="button" type="capsule" value="Next"></button>
运行结果如下图所示:
总结
今天熟悉了一些组件,是不是对鸿蒙OS的了解又多了一些呢,慢慢来,总会熟练的。