HarmonyOS Next开发学习手册——容器组件(form开发）

OpenHarmony_小贾

于 2024-07-16 16:41:13 发布

阅读量354

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 深度学习移动开发 ui 鸿蒙开发组件化开发容器

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/140470545

form是一个表单容器，支持容器内 Input 组件内容的提交和重置。

创建form组件

在pages/index目录下的hml文件中创建一个form组件。

<!-- xxx.hml -->
<div class="container">
  <form style="width: 100%; height: 20%">  
    <input type="text" style="width:80%"></input>
  </form>
</div>

/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

实现表单缩放

为form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考通用属性。

<!-- xxx.hml -->
<div class="container">
  <form  id="formId" class="formClass" click-effect="spring-large">
    <input type="text"></input>  
  </form>
</div>