Axure 教程:按钮与文本框结合在一起的动态重置功能

  • 发布时间:2019-12-20 12:45:04

这篇文章要告诉你的是,按钮和文本框组合的动态复位功能,享受~

1.1.1页面设置

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

在"重置功能"页面中,创建一个名为"窗口"的"组合文件",并在"组合文件"中创建"模板注释"、"词典名称"、"组合文件"分别名为"左上角"和"矩形"元素名为"重置按钮"和"窗口背景"。

(1)模板备注

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

“模板注释-背景”的填充颜色为#ffffff,边框为1px实线,颜色值为#e4e4e4。“模板注释-文本框”没有边框,框中的字体大小为12px,字体颜色为#33333,填充颜色为#ffffff,并在属性-类型-提示文本中输入描述内容(文本大小为12px,字体颜色为#3333),高度为162px,宽度为233px。“模板备注-标题”的填充颜色是透明的,没有边框,字体大小为12px,颜色值为#666666。

(2)词典名称

从组件库中拉入两个[矩形]和一个[文本框]组件,分别制作“词典名称-标题”、“词典名称-文本框”和“词典名称-背景”。

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

1.2.1效果设计

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

选择“复位”按钮,进行[交互风格设置],鼠标悬停、按下后,将所选交互风格的填充颜色设置为#00cc00。

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

选择[文本框]组件,将[类型]设置为查询(当文本框中输入文本时,将出现清除文本框中文本的交互效果),隐藏提示触发检查作为输入。

1.2.2互动流程

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

选择“重置”按钮,在“属性”中设置“鼠标点击时”的交互情况,并配置相关操作。

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

将[组件文本]添加到[条件设置中,选择“模板注释-文本框”和“词典名称-文本框”,并将两者的值设置为不等于(!=)空条件。

第二步:设置“模板注释-文本框”和“词典名称-文本框”的动态交互效果

将设置文本的操作添加到案例1组织操作中,选中配置操作中的“模板备注-文本框”和“字典名称-文本框”,并将文本设置为:值=空白。

请路过的朋友多多支持,先在这里躺枕江山谢谢,以后会有更多高质量的文章和产品在这个平台上发布,敬请期待!

这篇文章最初是由@Wozhe江山发表的。每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

黑龙江十一选五 吉林十一选五 极速飞艇下注 吉林快三


    推荐新闻