文本框组合

本文要给大家讲解的是按钮和文本框结合的动态重置功能,尽情享受吧~

文本框组合设置文本1.1页面布局1.1.1页面设置

创建一个新的页面文件,命名为“重置函数”。

在重置功能页面新建一个名为Window的组合文件,在组合文件中分别新建一个名为Template Remarks、Dictionary Name、左上角和矩形组件名为Reset Button和Window Background的组合文件。

(1)模板备注(1)模板备注

从组件库中拉入两个矩形和一个文本框,分别制作模板注释-标题、模板注释-文本框和模板注释-背景。

“模板备注-背景”填充颜色为#ffffff,边框为1px实线,颜色值为#e4e4e4。“模板备注-文本框”无边框,框内字体大小为12px,字体颜色为# 33333,填充颜色为#ffffff。请输入描述(文字大小12px,字体颜色#333333),高度162px,宽度233px。“模板备注-标题”的填充颜色为透明无边框,字体大小为12px加粗,颜色值为# 66666。

(2)字典名

从组件库中拉出两个矩形和一个文本框,分别制作字典名-标题、字典名-文本框和字典名-背景。

字典名称-背景填充颜色为#ffffff,边框为1px实线,颜色值为#e4e4e4,字典名称-文本框无边框,框内字体大小为12px,字体颜色为#333333,填充颜色为#ffffff,高度为21px,宽度为233px,字典名称-标题

1.2 动态交互

1.2.1效果设计

(1)重置按钮的交互样式设置。

选择“重置”按钮,进入“交互样式设置”,将所选交互样式的填充颜色设置为#00CC00。

(2)文本框的交互样式设置

选择【文本框】组件,将【类型】设置为查询(当您在文本框中输入文本时,会有清除框中文本的交互效果),隐藏提示会触发检查为输入。

1.2.2互动过程

(1)重置按钮联动字典名称和模板注释文本框的动态交互效果。

选择“重置”按钮,在“属性”中设置“鼠标点击时”的交互用例,配置相关动作。

步骤1:设置用例名称的编辑条件。

将组件文本添加到条件建立中,选择模板注释-文本框和字典名称-文本框,并将它们的值设置为不等于(!=)空条件。

步骤二:设置“模板备注-文本框”&“字典名称-文本框”的动态交互效果第二步:设置“模板备注-文本框”&;“字典名-文本框”的动态交互效果

在案例1【组织动作】中添加【设置文本】的动作,在【配置动作】中勾选“模板注释-文本框”和“字典名称-文本框”,设置文本为:value =空。

1.3 预览效果

请路过的朋友们多多支持哈,卧枕江山在这里先谢谢了,以后会有更多优质的文章和产品在这个平台上进行发布,请尽请期待呦!请路过的朋友多多支持。在此提前感谢躺在枕头上的你。未来会有更多高质量的文章和产品发布在这个平台上,敬请期待!

本文最初由@发布亵亵亵亵亵。每个人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论