Axure 03-动态面板的使用&案例

目录

一、动态面板基本介绍

二、动态面板的基本使用

三、实例展示: 

        3.1 多方式登录

        3.2 主页侧边栏

       3.3 ERP登录界面

        3.4 ERP 左侧菜单栏

        3.5 ERP轮播图  

---

一、动态面板基本介绍

动态面板是Axure中一个非常强大的高级元件，用于实现多个状态的切换展示，同时也常用于充当Axure中的定时器。同时动态面板也是一个容器，它可以容纳其他元件，包括在动态面板里面再设置一个动态面板，通过各种交互触发其状态发生变化。

二、动态面板的基本使用

  2.1、首先我们添加一个动态面板，双击以后可以进行编辑，可以添加多个状态，并自定义命名。可以在每个状态界面自行添加需要的元件，动态面板默认显示第一个状态。

 2.2 当我们使用动态面板的时候，一般是勾选自适应内容和100%宽度，否则里面的元件会比动态面板大，如果我们勾选了自适应内容，他会自动跟我们里面的元件大小保持一致，参考以下gif：

  2.3 动态面板的状态可以通过"设置面板状态"这个元件动作来设置。可以为任意元件添加交互事件，选择元件动作为“设置面板状态”。从状态列表中可以看到所有的状态名、上一项、下一项、停止循环和值这几个选项。不然它会在第三张图片的时候停下来，如果我们勾选了，他就会一直循环，我这边设置的动画是逐渐5秒的动画（看自己的需求选择动画）

 2.4 实现一个轮播图，是需要多张图片，一个状态就是一张图片，这边我是弄三张图片的，使用了元件里的水平箭头，一个箭头弄一个交互事件，参考以下gif:

三、实例展示: 

        3.1 多方式登录

   这里我使用了动态面板，实现了一个多方式登录界面，那个黑色的条形状是矩形，我给矩形设置了两个动态面板，每个登录下面都放了一个动态面板，同时给账号登录、短信登录设置了交互事件，当我们点击短信登录的时候，会触发我们的面板设置，从而矩形会更改位置，而文本标签、文本框类似，只不过给上面的账号登录、短信登录，多添加了一个目标，参考以下gif：

        3.2 主页侧边栏

       3.3 ERP登录界面

 

        3.4 ERP 左侧菜单栏

        3.5 ERP轮播图