Axure PR 9 穿梭框 设计交互


​大家好,我是大明同学。

这期内容,我们将深入探讨Axure中穿梭筛选宽元件设计与交互技巧。

穿梭筛选框元件

创建穿梭筛选框所需的元件

左穿梭筛选框

1.打开一个新的 RP 文件并在画布上打开 Page 1。

2.现在画布上创建一个背景,在元件库中拖出一个矩形元件,宽值200,高值300,线宽值1,线框颜色(#D9D9D9)圆角半径为6。

3,创建穿梭筛选框头部元件,在元件库中突入一个矩形元件,宽值198,高值48,线宽值0,填充颜色(#F2F2F2)圆角半径为6,选中前面做好的矩形元件,顶部对齐。

4.在头部元件中创建全选按钮,从元件库中拖入复选框元件,文本改成待选列表,左上角对齐。

5.创建穿梭框选项列表,在元件库中拖入一个内联框架,右键转为动态面板,并命名为左穿梭框

6.双击左穿梭框动态面板,在元件库中拖入一个中继器元件,双击中继器元件,删除原始单元格,在元件库中拖入若干个复选框,并输入一些待选项。

创建右穿梭筛选框

1.复制粘贴做好的左穿梭筛选框,将头部待选列表改为已选列表,选中穿梭选项列表左穿梭框改为右穿梭框,并保留一个选项。

创建向左向右穿梭按钮

1.在元件库中拖入一个矩形,宽高值为30,填充色为浅蓝色(#F5F7FA)线宽1,线色为灰色(#CCCCCC),复制一个向右的icon,居中组合。

2.复制向右按钮元件,将向右箭头改为向左。

创建交互

创建“待选列表”按钮的交互状态

1.选中待选列表按钮元件,在交互窗格中新建交互,选中,设置选中 选项为“真”,新建交互,取消选中时,设置选中,选项为“假”。

创建“已选列表”按钮的交互状态

1.同理设置已选列表按钮,也可复制待选按钮的交互粘贴到已选列表按钮中。

创建“左穿梭框”的交互状态

1.双击左穿梭框动态面板,选中中继器选项元件,在交互窗格中新建交互,每项加载,设置文本选项 为“[[Item.Column0]]”

2.双击中继器选项元件,对单个选项新建交互,选中,标记行 (中继器)当前,取消选中时,取消标记,(中继器)当前。

3.新建交互,移动时,启用情形判断。

情形1:如果 选中状态于 当前 ==真,添加行,(中继器)添加1行。

*需要注意的是,添加的行这里引用的 右穿梭框中的中继器

等待 500毫秒,删除行,(中继器)中已标记的行。

4.添加复选框属性,交互样式,元件选中时,字体、线段颜色为蓝色(#0052D9)

创建“左穿梭框”的交互状态

1.同理配置右穿梭框交互。

创建“向左向右”穿梭按钮的交互转态

1.选中向右穿梭按钮,在交互窗格中新建交互,单击时,触发事件,选项 fire 移动时。

2.同理设置向左按钮的交互状态。

预览交互

点击预览,在预览页面 可将选项在左右穿梭框中任意穿梭。

预览地址:https://rnerwc.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【东莞石碣】戴尔R740服务器维修raid硬盘问题

1:石碣某塑料工厂下午报修一台戴尔R740服务器硬盘故障,催的还比较着急。 2:工程师经过跟用户确认故障的问题以及故障服务器型号和故障硬盘型号,产品和配件确认好后,公司仓库确认有该款硬盘现货,DELL 12T S…

介绍一下strncpy(c基础)

strncpy是strcpy的进阶版&#xff0c;都是把一个字符串赋值给另一个字符串。但不同的是strncpy可以选择复制几个字符&#xff08;可以完全替代strcpy&#xff09; 链接介绍一下strcpy函数&#xff08;c基础&#xff09;-CSDN博客 格式 #include<string.h> strncpy(ar…

【Pythonr入门第二讲】你好,世界

"Hello, World!" 是一种传统的编程入门示例&#xff0c;通常是程序员学习一门新编程语言时编写的第一个程序。这个程序的目标非常简单&#xff1a;在屏幕上输出 "Hello, World!" 这个字符串。尽管它非常简单&#xff0c;但具有重要的象征意义和实际价值。 …

工业生产安全-安全帽第二篇-用java语言看看opencv实现的目标检测使用过程

一.背景 公司是非煤采矿业&#xff0c;核心业务是采选&#xff0c;大型设备多&#xff0c;安全风险因素多。当下政府重视安全&#xff0c;头部技术企业的安全解决方案先进但价格不低&#xff0c;作为民营企业对安全投入的成本很敏感。利用我本身所学&#xff0c;准备搭建公司的…

Windows 服务常用工具及 nssm 使用示例

Windows 将某个应用程序设为服务运行&#xff0c;确保它在后台稳定运行&#xff0c;并且在系统重启后自动启动。 常见的工具包括 Windows 自带的服务管理器、sc 命令、srvany 和第三方工具 nssm。 1.常用 Windows 服务工具 Windows 服务管理器&#xff1a;通过图形化界面&am…

汽车资讯新动力:Spring Boot技术驱动

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

头歌——vlan基本配置第二关

任务描述 本关任务&#xff1a;根据前面的实验&#xff0c;完成相应的题目测试。

深度解析FastDFS:构建高效分布式文件存储的实战指南(上)

文章目录 一、FastDFS简介1.1 概述1.2 特性 二、FastDFS原理架构2.1 FastDFS角色2.2 存储策略2.3 上传过程2.4 文件同步2.5 下载过程 三、FastDFS适用场景四、同类中间件对比4.1 FastDFS和集中存储方式对比4.2 FastDFS与其他文件系统的对比 五、FastDFS部署5.1 单机部署5.1.1 使…

LeetCode 3249.统计好节点的数目:深度优先搜索(DFS)

【LetMeFly】3249.统计好节点的数目&#xff1a;深度优先搜索(DFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-the-number-of-good-nodes/ 现有一棵 无向 树&#xff0c;树中包含 n 个节点&#xff0c;按从 0 到 n - 1 标记。树的根节点是节点 0 。给你一…

中国省级金融发展水平指数(金融机构存款余额、贷款余额、GDP)2020-2023年

数据范围&#xff1a; 包含的数据内容如下&#xff1a; 分省份金融机构存款余额、分省份金融机构贷款余额、分省份金融机构存贷款余额、分省份GDP、分省份金融发展指数 西藏自治区、贵州省、黑龙江省2023年数据暂未公布&#xff0c;计算至2022年&#xff0c;其他省份数据无缺失…

大模型(LLMs)RAG 版面分析——表格识别方法篇

大模型&#xff08;LLMs&#xff09;RAG 版面分析——表格识别方法篇 一、为什么需要识别表格&#xff1f; 表格的尺寸、类型和样式展现出多样化的特征&#xff0c;如背景填充的差异性、行列合并方法的多样性以及内容文本类型的不一致性等。同时&#xff0c;现有的文档资料不…

力扣(leetcode)题目总结——辅助栈篇

leetcode 经典题分类 链表数组字符串哈希表二分法双指针滑动窗口递归/回溯动态规划二叉树辅助栈 本系列专栏&#xff1a;点击进入 leetcode题目分类 关注走一波 前言&#xff1a;本系列文章初衷是为了按类别整理出力扣&#xff08;leetcode&#xff09;最经典题目&#xff0c…

【python系列】python数据类型的分类和比较

一、数据类型的定义 在程序设计的类型系统中,数据类型(英语:Data type),又称资料型态、资料型别,是用来约束数据的解释。——Wikipedia 从定义我们可以看出来,数字类型的理解最主要的是约束数据的解释,每个类型都有他们自己所使用得场景,这个就是数字类型的分类,分类…

【JavaSE】【多线程】阻塞队列

目录 一、阻塞队列1.1 生产者消费者模型1.2 Java提供的阻塞队列1.3 实现一个简单生产者消费者模型 二、自己实现阻塞队列2.1 成员变量2.2 构造方法2.3 put方法2.4 take方法2.5 最终代码 一、阻塞队列 阻塞队列&#xff1a;是一种特殊的队列&#xff0c;也有先进先出的特性。它…

【pytest】pytest注解使用指南

前言&#xff1a;在 pytest 测试框架中&#xff0c;注解&#xff08;通常称为装饰器&#xff09;用于为测试函数、类或方法提供额外的信息或元数据。这些装饰器可以影响测试的执行方式、报告方式以及测试的组织结构。pytest 提供了多种内置的装饰器&#xff0c;以及通过插件扩展…

el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现

el-table 中有现成的隔行换色功能&#xff0c;只要增加 stripe 属性即可。但是如果有单元格合并的话&#xff0c;这个属性就不可用了。这时候我们就需要动点小心思了。 基于相同字段进行合并 单元格合并&#xff1a;基于表头中的某一列&#xff0c;具有相同值的个数相加进行合…

OpenAI模型whisper 音频转文本

最近有一个音频转文本的需求&#xff0c;了解到了OpenAI的whisper模型可以实现。 Whisper 是 OpenAI 提供的一个通用语音识别模型&#xff0c;支持多语言的音频转文本功能&#xff0c;并具有较高的准确性。它的主要用途包括自动语音识别 (ASR)、语言翻译&#xff08;将音频直接…

ubuntu下连接了192.168.1.x和192.168.2.x两个网络段,如何让这个两个网段互相通信?

在 Ubuntu 上连接两个网络段&#xff08;如 个人终端A 192.168.1.10 和 个人终端B 192.168.2.10&#xff09;&#xff0c;需要配置路由和网络转发功能&#xff0c;使这两个网段能够相互通信。以下是实现方法&#xff1a; 步骤 1&#xff1a;确认网络配置 1. 确保 Ubuntu 机器…

汽车资讯新高度:Spring Boot技术飞跃

6系统测试 6.1概念和意义 测试的定义&#xff1a;程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为&#xff1a; 目的&#xff1a;发现程序的错误&#xff1b; 任务&#xff1a;通过在计算机上执行程序&#xff0c;暴露程序中潜在的错误。 另一个…

03-axios常用的请求方法、axios错误处理

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…