鸿蒙第四次

<div class="container">

1. <div class="div-button">
2. <dialog class="dialogClass" id="dialogId">
3. <div class="content">
4. <text>this is a dialog</text>
5. </div>
6. </dialog>
7. <input class="button" type="button" value="click" οnclick="btnclick"></input>
8. </div>
9. <div class="content">
10. <input οnchange="checkboxOnChange" checked="true" type="checkbox"></input>
11. </div>
12. <div class="content">
13. <input type="date" class="flex" placeholder="Enter data"></input>
14. </div>
15. </div>

1. /* xxx.css */
2. .container {
3. align-items: center;
4. flex-direction: column;
5. justify-content: center;
6. background-color: #F1F3F5 ;
7. }
8. .div-button {
9. flex-direction: column;
10. align-items: center;
11. }
12. .dialogClass{
13. width:80%;
14. height: 200px;
15. }
16. .button {
17. margin-top: 30px;               
18. width: 50%;
19. }
20. .content{
21. width: 90%;
22. height: 150px;
23. align-items: center;
24. justify-content: center;
25. }
26. .flex {
27. width: 80%;
28. margin-bottom:40px;
29. }

 

1. // xxx.js
2. export default {
3. btnclick(){
4. this.$element('dialogId').show()
5. },
6. }

 

 

底部组件

JS UI框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

 

// common.datas.tabbarItem.js
export default [
    {
        img:'common/images/home.png',
        simg:'common/images/home_s.png',
        name:'首页'
    },
    {
        img:'common/images/hot.png',
        simg:'common/images/hot_s.png',
        name:'热点'
    },
    {
        img:'common/images/us.png',
        simg:'common/images/us_s.png',
        name:'社区'
    },
    {
        img:'common/images/me.png',
        simg:'common/images/me_s.png',
        name:'我'
    }
]