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

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

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

一、案例预览

ezgif-2-96a8f539c0.gif

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

二、制作思路

1. 下拉选项

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

2. 选择框

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

3、交互设置

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

二、重要步骤

1. 创建选择框

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

截屏2024-08-24 20.32.13.png

2. 创建下拉选项弹窗

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

截屏2024-08-24 20.33.20.png

3、设置中继器数据结构

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

image.png

image.png

4、设置交互

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

image.png

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

image.png

相关文章
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
2303 8
|
11月前
|
人工智能 算法 安全
一文了解算法备案中的“服务提供者”和“服务技术支持者”角色差异
很多企业常常以服务对象来判断角色,比如“我做toB业务,就是技术支持者”“我做toC产品,就是服务提供者”。但事实上,这种判断方式并不准确。
|
存储 自然语言处理 监控
民航机场大模型私有知识库搭建步骤:技术选型 + 实施路径全解析!
近年来,民航机场面临知识管理难题,大模型技术为构建高效、安全的企业知识库提供了新思路。本文介绍知识库发展历程、大模型应用挑战,并详述私有化部署策略与八大实施步骤,助力民航提升运营效率与服务质量。
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
1396 2
|
存储 JavaScript 前端开发
Axure设计之日期时间范围选择器
在产品设计和原型制作中,日期时间范围选择器是常见需求。本文介绍如何使用Axure的动态面板、中继器、文本框、按钮及时间函数,快速制作一个功能完备的日期时间范围选择器。详细步骤包括创建基本框架、设置时间函数、载入时获取当前时间、添加时间选择功能、更新文本框值和验证格式化。通过这些步骤,你可以在Axure中轻松实现这一功能。
2214 0
|
Web App开发 存储 JSON
基于Vue3 写一个更好用的在线帮助文档工具
提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式。另外可以在线写(修改)代码并且运行的效果。

热门文章

最新文章