axure内联框架和动态面板_Axure -- 动态面板入门解析

本文介绍了Axure动态面板的基础知识,包括样式设置中的滚动条选项,如从不滚动、按需滚动、垂直滚动和水平滚动。动态面板的自适应内容功能允许面板根据内容自动调整大小。此外,还探讨了100%宽度的应用场景以及固定到浏览器的交互效果。文章还提及动态面板特有的交互事件,如拖动事件,可用于模拟手机交互。
摘要由CSDN通过智能技术生成

动态面板简介

动态面板 -- 样式(特有)

滚动条设置(预览页面的区域滚动条)

从不滚动

在预览界面隐藏滚动条。

注意:会根据动态面板的大小展示对应内容,超出动态面板部分内容不能展示。

按需滚动

在预览界面根据内部内容的大小相对动态面板大小进行展示滚动条。

说明:如果内容(State)对应的宽度大于动态面板的宽度,自动展示水平滚动条

如果内容(State)对应的高度大于动态面板的高度,自动展示垂直滚动条。如图虚线范围,超出后就会展示滚动条

垂直滚动

只展示垂直滚动条。通常用于手机页面的制作使用。

注意:宽度超出范围(水平范围),将不展示。、

水平滚动

只展示水平滚动条。

注意:高度超出范围(垂直范围),将不展示。

自适应内容

勾选打开自适应内容后,动态面板大小会随着内部内容大小边界自动调整。

注:默认创建的动态面板是300PX *170PX的大小

技巧:只使用一个动态面板State时,可以进行勾选,会自动调节大小,减少手动修改大小流程。

100%宽度

高度保持设置的高度,宽度随着浏览器的宽度自适应。

技巧:在做后台管理系统界面,官网界面,需要菜单栏适应浏览器宽度时可以设置100%宽带。设置截图

预览截图

固定到浏览器

保持动态面板的位置在浏览器中不随着滚动条的调整而滚动。

技巧:例如部分网页的左边联系我们的悬浮按钮。APP端的底部菜单栏等等,都可采用此方法实现。

动态面板--交互事件(特有)

在动态面板中,加入了一些特有的交互事件。通过鼠标的操作可以触发交互结果。此类交互可以模拟一些手机交互。例如拖动事件等等。

使用方法:在动态面板上进行设置交互事件。交互事件截图5b8950f2c586ec13c374560879671fb0.png动态面板交互事件视频https://www.zhihu.com/video/1227199077559275520

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值