Axure RP官方教程翻译(5):标签控制

本篇教程讲解制作一个交互结构以达到当我们点击一个标签时可以显示那个标签里内容的目的,实现的效果如下:

Axure RP官方教程翻译(5):标签控制

 STEP 0:下载培训文档

如果你还没有培训文档,请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程,但是如果你不用,那也是可以的——即使你没有使用我们的培训文档,我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。

AxureTraining.rp文档打开后,选择本次练习页面后如下:

Axure RP官方教程翻译(5):标签控制

STEP 1:开始

  • * 打开培训文档中的“Tab control”页面。
  • 页面中包含了两个标签组件,“Tab 1”和“Tab 2”,这两个都已经设置好了选中后的交互效果(点击后呈现的颜色为f2f2f2)
  • 页面还包含了两个组,“Body 1”和“Body 2”.“Body 1”包含了“Tab 1”的内容,“Body 2”包含了“Tab 2”的内容

STEP 2:创建动态面板

  • 右键点击“Body 1”组,选择“转化成动态面板”。
  • 双击刚创建的动态面板打开动态面板管理器。
  • 点击绿色的“+”号添加一个状态。
  • 双击新状态的名字State 2进行编辑。
  • 返回到“Tab control”页面。右键点击“Body 2”选择“剪切”。
  • 返回到“State2”标签栏并且粘贴“Body 2”(将其X,Y的数值都改为0)。

Axure RP官方教程翻译(5):标签控制

STEP 3:给“Tab 1”添加交互

  • 选择“Tab 1”,双击右侧属性标签栏下的“OnClick”来添加一个“OnClick”实例。
  • 在左边栏,点击行为“设置面板状态”。
  • 在右边的“配置行为”栏,选择你刚刚创建的动态面板。
  • 在底部栏“选择状态”,使用下拉选项选择“State1”(通常它是默认选择好的)。
  • 回到左边栏点击行为“设置选中/勾选”。
  • 在右边栏,点击复选框“这个组件”。
  • 点击“确定”关闭对话框。

Axure RP官方教程翻译(5):标签控制

STEP 4:为“Tab 2”重复上面的步骤

为“Tab 2”重复上面的操作。当你添加“设置面板状态时”,确认这次要选择“State 2”。

STEP 5:创建一个选择组

  • 选中一个标签就需要取消选择另一个标签,所以我们需要将两个标签组成一个选择组。在选择组中,一次只能有一个组件可以被选中。当一个组件被选中,组里的另一个组件将会自动取消选择。
  • 选择“Tab 1”和“Tab 2”。
  • 在右侧属性标签栏下,定位到“选择组”区域。在这个区域输入“TabGroup”来可以创建一个选择组并将这些组件放到组里。

Axure RP官方教程翻译(5):标签控制

STEP 6:预览

点击预览。

尝试点击这两个标签来切换他们。被选中的标签会改变成选中时的状态(f2f2f2),并且动态面板会改变成对应的状态。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code