【Axure RP9】动态面板使用------案例:包括轮播图和多方式登入及左侧菜单栏案例

目录

[一 动态面板简介](#一 动态面板简介)

[1.1 动态面板是什么](#1.1 动态面板是什么)

[二 轮播图](#二 轮播图)

[2.1 轮播图是什么](#2.1 轮播图是什么)

[2.2 轮播图应用场景](#2.2 轮播图应用场景)

[2.3 制作实播图](#2.3 制作实播图)

[三 多方式登入](#三 多方式登入)

3.1多方式登入是什么

[3.3 多方式登入实现](#3.3 多方式登入实现)

[四 左侧菜单栏](#四 左侧菜单栏)

4.1左侧菜单栏是什么

[4.2 左侧菜单栏实现](#4.2 左侧菜单栏实现)


一 动态面板简介

1.1 动态面板是什么

动态面板是一种特殊的UI组件,它可以包含多个子部件,并且可以显示或隐藏这些子部件。动态面板的主要特点是它可以在不同的状态之间切换,每个状态可以包含不同的子部件。通过切换状态,动态面板可以显示或隐藏不同的子部件,从而实现不同的功能

二 轮播图

2.1 轮播图是什么

轮播图是一种常见的网页设计元素,用于展示多张图片或内容,通过自动或手动切换实现轮流显示,以提高网页的视觉效果和用户体验。轮播图通常以水平或垂直排列的方式呈现,可以同时显示多个内容点或图片缩略图,用户可以通过点击或滑动来触发切换效果

2.2 轮播图应用场景

  • 首页轮播图:

用于首页的头图,通常呈现的是品牌形象、产品特点、最新活动等信息。

  • 图片展示:

用于图片展示区域,例如产品画廊、公司实景展示等。

  • 广告推广

用于网站或应用内的广告推广位,通过精准定位、多张广告轮播,为广告主提供广阔的曝光机会。

  • 新闻资讯:

用于新闻中轮播多张图片或文章标题,吸引用户的点击或浏览。

2.3 制作实播图

效果图:

注意:使用动态的时候会有遮罩它不在浏览器中呈现。

全部概要:

注意: 不包含在动态面板中会在每个状态中显示 State(状态) 下的元件是切换到本状态的时候会全部显示 所以上图我的State(状态)有五种 然后再>元件中新建交互选择动态面板 设置相关的事件等等即可

三 多方式登入

3.1多方式登入是什么

多方式登录是指用户可以使用多种方式进行登录,例如使用用户名和密码、手机验证码、社交媒体账号等。这种登录方式可以增加用户的安全性和便利性,因为用户可以使用自己最熟悉或最方便的方式进行登录。

3.3 多方式登入实现

全部概要:

实现流程:

本登入实现有两个动态面板 下划线面板(其中两个状态) 控制内容一个面板(两个状态)

附带ERP登入案例:

四 左侧菜单栏

4.1左侧菜单栏是什么

左侧菜单栏是一种用户界面设计元素,通常位于应用程序或网站的左侧,用于提供用户导航和访问不同功能或页面的选项。这种设计可以使得用户更方便地找到他们需要的信息或功能,提高用户体验。左侧菜单栏通常包含一系列链接或按钮,每个链接或按钮都代表一个特定的功能或页面

4.2 左侧菜单栏实现

效果:

全部概要:

实现流程: 在一整个动态面板中 嵌套三个不同的动态不同的动态有着两个状态来控制子菜单的显示和收起

相关推荐
渣渣盟5 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark
大前端helloworld6 小时前
AI全自动实现Flutter蓝牙自动连接
前端
GISer_Jing6 小时前
从入门到落地:前端开发者的AI Agent全栈学习路线
前端·人工智能·ai编程
计算机安禾6 小时前
【Linux从入门到精通】第47篇:SystemTap与eBPF——Linux内核观测的显微镜
java·linux·前端
技术钱6 小时前
OutputParser输出解析器
linux·服务器·前端·python
专科3年的修炼6 小时前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
可达鸭小栈7 小时前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
fox_lht8 小时前
DBeaver的LightGrid 类所有函数详细分析
前端
钛态8 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
光影少年8 小时前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架