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…

summernote富文本批量上传音频,视频等附件

普通项目,HTML的summernote富文本批量上传音频,视频等附件(其他附件同理) JS和CSS的引入 <head><th:block th:include"include :: summernote-css" /> </head> <body><th:block th:include"include :: summernote-js" /> …

介绍一下strncpy(c基础)

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

1065 A+B and C (64bit) (20)

Given three integers A, B and C in (−2^63,2^63), you are supposed to tell whether AB>C. Input Specification: The first line of the input gives the positive number of test cases, T (≤10). Then T test cases follow, each consists of a single line conta…

【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…

10万字208道Java经典面试题总结(2024修订版)- SpringBoot篇下篇

目录 1、Spring Boot的配置文件有哪几种格式&#xff0c;它们之间有何区别&#xff1f;2、Spring Boot如何实现跨域资源共享&#xff08;CORS&#xff09;&#xff1f;3、Spring Boot中的配置文件如何进行加密&#xff1f;4、Spring Boot如何集成Spring Data JPA&#xff1f;5、…

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

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

解决前后端发版本时候,手动清除浏览器缓存

在.html页面中添加标签 后端配置nginx,让index.html不缓存 location /index.html { add_header Cache-Control “no-cache, no-store”; }在vite.config.ts中添加 rollupOpyions: { output: { // 输出编译后的文件名称&#xff1a;【文件名称.时间戳】、【文件名称.版本号.…

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

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

基于java实现选择排序和插入排序

选择排序 实现逻辑&#xff1a; 选择排序是将当前元素和剩下的元素进行比较当当前元素大于所比较的元素的时候两个元素进行交换 public class Search { // 选择排序private void Serach() {};public static <E extends Comparable <E> > void search(E[] arr…

Spring Boot教程之三:Spring Boot 与 Spring MVC 及 Spring的区别

Spring Boot 与 Spring MVC 的区别 Spring MVC&#xff1a; Spring 被广泛用于创建可扩展的应用程序。对于 Web 应用程序&#xff0c;Spring 提供了 Spring MVC 框架&#xff0c;它是 Spring 的一个广泛使用的模块&#xff0c;用于创建可扩展的 Web 应用程序。Spring MVC 框架支…

深度解析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…

【Elasticsearch】01-ES安装

1. 安装 安装elasticsearch。 docker run -d \--name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \-e "discovery.typesingle-node" \-v es-data:/usr/share/elasticsearch/data \-v es-plugins:/usr/share/elasticsearch/plugins \--privileged \--networ…

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

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