Axure设计之下拉单选框教程(中继器)

在Axure RP中,使用中继器(Repeater)可以实现许多复杂而动态的用户界面组件,比如下拉单选框。本文将详细介绍如何通过中继器创建一个美观且功能丰富的下拉单选框。

一、案例预览

预览地址:https://1zvcwx.axshare.com

实现效果:1、下拉选项超过固定高度可滚动显示;2、选中状态时边框高亮,且选项实现鼠标悬停和选中时交互样式;3、下拉框箭头图标根据状态切换,选中后可删除已选项;

二、设计思路

1. 下拉选项

下拉选项为了后期方便修改和复用,使用中继器,由于数据可动态修改固定高度,使用动态面板。定义好中继器的数据结构,这通常包括几个关键的字段,option(选项文本)、selected(选中状态,0或1)

2. 选择框

选择框使用矩形;内部使用文本框作为提示和选项回显;右侧选择框图标使用动态面板,这里有三种状态(未点击时向下图标、选中时向上图标、以选时删除图标)

3、交互设置

需要设置选择框交互事件和中继器选项的交互事件。

三、重要步骤

1. 创建选择框

拖入一个矩形和文本框作为选择框容器,再拖入动态面板,额外增加两项面板状态作为图标动态切换设置。

2. 创建下拉选项弹窗

拖入一个矩形,并在内部创建一个动态面板作为下拉框的容器,动态面板内部创建中继器。中继器为每个数据项作为下拉选项的视觉表现。

3、设置中继器数据结构

在中继器的样式页面中,设置数据项为option、selected。这些字段将用于动态加载下拉单选框的选项和选中状态。

4、设置交互

设置选择框的交互,控制下拉选项弹窗,以及图标的渲染效果。

设置下拉选项中继器的交互及每项点击时的交互事件。

推荐Axure元件库、可视化大屏模版原型:

Axure高端交互元件库:助力产品与设计-CSDN博客

数据可视化Axure大屏原型制作分享-CSDN博客

关注下方,回复数字666获取元件库。

相关推荐
招风的黑耳3 天前
Axure设计之左右滚动组件教程(动态面板)
axure·元件库·左右滚动·滚动导航
结构化知识课堂4 天前
Axure中继器组合应用交互
产品经理·axure·中继器·多个中继器·中继器组合·高级交互
梓贤Vigo6 天前
【Axure原型分享】颜色选择器——填充颜色
交互·产品经理·axure·原型
梓贤Vigo6 天前
【Axure视频教程】中继器控制显示不同内容
交互·产品经理·axure·原型·中继器
结构化知识课堂6 天前
Axure文本框读取和赋值高级交互
交互·产品经理·axure·下拉列表·文本框
flutter大佬8 天前
axure中继器
axure
招风的黑耳9 天前
Axure设计之多级菜单导航教程(中继器)
axure·三级菜单·菜单导航·多级菜单导航
结构化知识课堂9 天前
Axure使用动态面板制作新闻栏目高级交互
产品经理·axure·动态面板·设置选中·鼠标悬停
hyiam9 天前
layui下拉框xm-select自定义搜索使用方法
javascript·html·layui·下拉框·xm-select·自定义搜索·自定义下拉框
结构化知识课堂11 天前
Axure设置文本——元件动作三
交互·产品经理·axure·设置文本