Axure--面板收起/展开

最新推荐文章于 2025-06-01 14:52:44 发布
最新推荐文章于 2025-06-01 14:52:44 发布
阅读量9.5k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： axure 文章标签： axure 收起展开
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39247153/article/details/89337018
本文介绍了如何在Axure中创建面板的收起和展开功能。通过绘制矩形和按钮，设置动态面板及点击事件，实现面板内容的隐藏与显示。此外，还提供了一篇参考链接以供学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要想实现上面的步骤：

1、首先绘制一个矩形和收起按钮

2、在绘制一个动态面板，放一个矩形和展开按钮

3、设置点击事件

3.1、先设置收起点击事件

3.2、先设置展开点击事件

最低0.47元/天 解锁文章

200万优质内容无限畅学
Axure常用交互效果五——展开与收回
benleiqiang的博客
10-10 2021
步骤八：为收回添加交互，载入时隐藏收回，单击时——显示展开，隐藏收回——隐藏背景1，隐藏新增查询条件——查询组合回到原位。步骤五：为展开按钮添加交互，单击时——显示查询条件和背景1——移动查询条件。步骤六：坐标的选择，需要我们模拟新增条件查询预到达位置，并记录下这个坐标；在做完以上交互后，我们还要隐藏展开这个按键，并显示收回，调起其他交互；步骤三：为新增的查询条件添加交互，组合这个查询条件，载入时隐藏。步骤四：组合查询按钮、展开和收回；
33.【Axure 10 】样式区域-元件样式（动态面板）
Brose的博客
08-19 517
本文对动态面板特有的元件样式进行说明。 动态面板新特性 在Axure10中，整体的动态面板进行了重新的处理，动态面板的所有状态页面可以全部进行展开显示。同时点击展开的面板可进入对应的编辑页面。 在展开的动态面板或收缩的动态面板中，均支持删除、重命名、动态面板快速复制调整等操作。 设置 滚动方式 从不滚动 在预览界面隐藏滚动条。 注意：会根据动态面板的大小展示对应内容，超出动态面板部分内容不能展示。 按需滚动 在预览界面根据内部内容的大小相对动态面板大小进行展示滚动条。 说明： 如果内容对应的宽度大.
Axure RP9——【工具栏展开收起效果】
两条线-twolines
11-25 7084
工具栏展开收起效果 TOOLBAR 目录 工具栏展开收起效果 I.效果演示 II.实现步骤 I.效果演示 当点击按钮的时候，可以显示出工具栏的内容；再次点击可以收缩复原。 如下演示： Axure RP9 ——工具栏展开收起效果 II.实现步骤 （1）工具栏展开效果 ①按钮先向右移动一小段缓冲距离 ②按钮向左移动到达指定位置；工具栏面板从中心向两端展开；工具栏组合移动到（0,0）的位置 ③按钮通过旋转变成关闭样式 （2）工具栏关闭效果 ①按钮先向左移动一段...
Axure组件即拖即用：垂直折叠菜单（动态展开/收回交互）
最新发布
benleiqiang的博客
06-01 1008
《Axure垂直折叠菜单组件解决方案》摘要 针对Axure原型设计中的菜单交互痛点，本文推荐一款高效垂直折叠菜单组件。该组件支持多级嵌套、平滑动画和自适应宽度，经万次点击测试稳定可靠，特别适合后台系统、移动端及数据平台等场景。解决方案包含智能预加载、自定义交互事件等功能，提供5级菜单支持（可扩展至10级），并详细解答了展开方向、页面跳转等常见问题。与传统自制方案相比，该组件将开发耗时从8小时降至3分钟，显著提升原型设计效率。附赠RP文件下载及使用教程。
Axure RP9制作三级菜单实现展开收起（保姆级教程）
qq_73566291的博客
08-28 5927
保姆级让你学会三级菜单制作！超详细！不信来看看
axureR9 制作左侧菜单弹出收起效果
mumuyouxi的博客
05-15 1099
单击时>显示/隐藏动态面板>切换>向下滑动>更多选项>推拉原件>下方>效果选择线性>点击完成。第三步：拖拉一个动态面板>动态面板里面拖拉button作二级菜单>动态面板隐藏。第五步：再拖拉一个button做一级菜单，和原先的一级菜单并排。第四步：点击一级菜单button，设置交互【第二步：拖拉1个button作一级菜单。第一步：打开axure,创建1个页面。
Axure实现随意折叠和展开
06-11
Axure实现随意折叠和展开，类似jQuery 效果 - 淡入淡出等等
Axure实现导航栏的展开与收缩
LAO__LIN的博客
04-12 2668
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互，主要使用区域是左边或者顶部的导航栏展开与收缩，同一级导航下的小标题，放在一起既美观又节省时间。
如何在Axure中做面板折叠/多级菜单折叠效果？
panjing_0520的博客
12-24 7351
工具：Axure RP 9 概论：使用动态面板，用交互效果切换面板状态，实现菜单折叠/展开的效果 最终实现效果：展开和收回 step1：在元件库中拖入矩形框，构建菜单栏 step2：选中所有矩形框，将矩形框设置为动态面板 step3：双击矩形框，到动态面板的设置窗口下，添加表头在state2下 复制一个表头到state2下 step4：关闭动态面板设置，选中矩形框，设置交互效果 选择交互效果【单击时】 选择【设置...
axure rp8 添加动态面板_Axure RP8 | 动态面板-容器
weixin_42117267的博客
01-26 1009
动态面板：能够在一个固定的区域切换显示的内容。能实现很多动态效果。其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机，而状态则是幻灯片。” 打开状态的编辑界面，即可放置各种各样的元件，组成内容。有几种特性：容器、多状态、拖动、循环、适应宽度、相对固定。动态面板-容器：能够让装载的内容有统一的动作。实现多个元件的统一移动或现实隐藏。场景一：登录面板的灯箱效果1. 准...
Axure——展开更多
hexieyyds的博客
06-17 3019
1、去网上复制一段文字进来Axure里面. 2、把文字粘贴进来Axure并分成三段，如图. 3、接着按图上的样式摆放. 4、然后把展开更多和隐藏打出来方便查看. 5、然后给展开更多加一个鼠标点击时的交互，如图. 6、再给隐藏加一个鼠标点击时的交互. 7、再把隐藏放进显示里面方便操作与观赏. 8、点击预览观看效果 . 9、这是在过程中的效果. 10、这是完成的效果. 同学们，这次的Axure之展开更多就结束了 各位大神萌新有什么想说的呢评论区见，up主.
用Axure实现单选按钮交互效果,点击展开，在点击一次关闭的效果
07-24
用Axure实现单选按钮交互效果,比如我们点击按钮，展开内容，再点击一次则内容影城起来，并且加上动画效果.有详细的图文结合
Axure 2、3层级菜单展开折叠Demo.rp
02-21
使用Axure做的 2、3层级菜单展开折叠Demo rp 源文件。 点击一级菜单展开二级菜单，点击二级菜单展开三级菜单。 用户可直接下载使用。
【Axure高保真原型】能展开收起的输入表单
mushe93的博客
05-20 480
今天和大家分享能展开收起的输入表单的原型模板，在需要填写内容较多时，可以对填写内容进行分类，然后通过点击上下箭头，收起或展开对应的信息。那这个模板里面是通过中继器制作的，方便我们填写中继器表格，就可以自动生成对应的输入项，里面包含了输入框、下拉列表、选择器共10余种常用的元件，后续也可以根据需要自行添加到中继器里。这个原型模板是用中继器制作的，所以使用也很方便，在中继器表格里填写表单的提示文字和输入类型即可，具体效果可以点击下方视频观看或打开预览地址来体验
Axure高级交互设计：垂直菜单展开与折叠（100%成功）
benleiqiang的博客
10-18 1887
步骤二：命名，设置两个主菜单组合，命名为基本元件库和交互效果；并分别组合两个子菜单，分别命名为基本元件库子菜单、交互效果子菜单；步骤一：拖入矩形，将颜色设置成和案例一致即可，分别进行文字输入，参考案例；步骤六：叠加四个按钮，形成如下图的效果；如有其他相关问题，欢迎私信沟通，关注。步骤五：交互效果菜单项展开与折叠交互。步骤三：添加两个子菜单载入时隐藏；步骤七：添加整体悬停效果，完工。
Axure高级交互设计：树形菜单展开与折叠
benleiqiang的博客
10-18 1615
步骤五：添加一级类目下蔬菜的交互；单击蔬菜按钮——显示二级类目——设置选中效果；步骤二：依次录入一级类目、二级类目、三级类目、商品名单，组成整体信息内容。步骤七：依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项。步骤三，除了一级类目，全部设置成载入时隐藏。如有其他相关问题，欢迎私信沟通，关注。
Axure8.0教程：动态面板左右滑动及展开收起
weixin_43516258的博客
03-18 3023
动态面板是产品的基本功能之一，应用也非常广泛。本文作者分享了如何用Axure，制作动态面板左右滑动及展开收起，希望对你有帮助。
Axure折叠与展开效果的实现
热门推荐
12-30 1万+
http://www.masterchat.cn/article/20120501/217.html 视频教程 项目效果 点击表头，内容会展开或者收缩。 第一步，用矩形工具分别建立如下效果的图形 2，将内容部分(Section下边)转换成动态面板，分别命名为content-section1，content-section2，content-section3，分别为每个Section添加on
axure展开收起日期选择
01-01
### 如何在 Axure 中实现日期选择器的展开和收起功能 为了实现在 Axure 中创建一个可以展开和收起的日期选择器，可以通过动态面板 (Dynamic Panel) 和交互事件来完成。以下是具体的方法： #### 创建日期选择器组件 1. **绘制静态结构** - 新建一个动态面板命名为 `DateSelector`。 - 在该动态面板内部放置两个状态：一个是关闭状态下只显示输入框的状态；另一个是打开状态下除了输入框外还包含了日历控件。 2. **设置初始属性** - 设置动态面板的多态行为为“单击切换”，这样每次点击都能改变其当前所处的状态。 - 对于日历部分，可以从Axure自带的小部件库中挑选合适的日历插件或者自行绘制简单的网格布局模拟日期排列方式。 #### 添加交互逻辑 - 配置当用户点击输入框时触发的动作： - 如果此时动态面板处于隐藏状态，则将其变为可见并调整位置使其正好位于输入框下方； - 若已处于显示状态则再次点击会令其实现折叠动作回到原始尺寸大小即仅保留输入框的部分[^1]。 ```javascript // JavaScript用于描述伪代码逻辑而非实际编写入项目中 if(DateSelector.getPanelState() === "Collapsed"){ DateSelector.setPanelState("Expanded"); }else{ DateSelector.setPanelState("Collapsed"); } ``` - 可以为日历中的每一天添加单独的点击响应，以便选定特定日期后自动更新输入框内的文本值，并立即执行收缩动画返回到最小化视图。 这种做法不仅实现了预期的功能需求——让日期选择器能够在界面上优雅地弹出/收回，同时也提高了用户体验感，使得整个过程更加直观友好[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值