Axure RP官方教程翻译(18):滑块

创建一个带有一个可拖拽手柄的横向滑块或一个垂直滑块。实现效果如下:

Axure RP官方教程翻译(18):滑块

STEP 1:开始

打开培训文档中的“Slider”页面。

这个页面由一个带有两个矩形组件的组组成。一个是滑块的背景,另一个是滑块控制器。

点击组进入滑块控制器并选中它。右键选择“转化为动态面板”。(我们需要用到拖拽交互,而只有动态面板有这个功能。)然后将动态面板重命名为“Handle”。

Axure RP官方教程翻译(18):滑块

STEP 2:创建拖拽交互

  • 继续选择“Handle”,双击属性标签栏下的“拖拽”来创建一个拖拽实例。
  • 在实例编辑器的左边栏,点击“移动”。
  • 在右边栏,点击“这个组件”。
  • 在右边栏的底部,使用“移动”的下拉选框选择“拖动X轴”。这个会将组件限定在只能横向滑动。
  • 在这个下面,点击“添加边界”。
  • 在第一个下拉选项选择“左边”。在接下来的下拉选项选择“大等于”,点击“fx”进行编辑。
  • 从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。
  • 在一个下拉框,选择“组件”。
  • 在最后一个下拉框,选择“Background”。
  • 移动到对话框的顶部,输入以下文字:[[LVAR1.left]]
  • 点击确定关闭编辑值窗口。
  • 这样第一个边界就设置好了。

Axure RP官方教程翻译(18):滑块

  • 在次点击“添加边界”来设置滑块右边的边界。
  • 在第一个下拉选项框中,点击“右边”。在第二个选项框,点击“小等于”,然后点击“fx”进行编辑。
  • 从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。
  • 在一个下拉框,选择“组件”。
  • 在最后一个下拉框,选择“Background”。
  • 移动到对话框的顶部,输入以下文字:[[LVAR1.right]]
  • 点击确定关闭值编辑器。第二个边界也设置好了,这个组件现在最远只能够拉到背景的右端。
  • 点击确定,关闭实例编辑器。

Axure RP官方教程翻译(18):滑块

STEP 3:预览

点击预览。

尝试拖拽滑块手柄。

 

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

发表评论

登录后才能评论

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

QR code