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

news2024/10/6 13:57:40

目录

一  动态面板简介

1.1 动态面板是什么

二 轮播图

2.1 轮播图是什么

2.2 轮播图应用场景 

2.3 制作实播图

三 多方式登入

3.1多方式登入是什么

3.3 多方式登入实现

四 左侧菜单栏

4.1左侧菜单栏是什么

4.2 左侧菜单栏实现


一  动态面板简介

1.1 动态面板是什么

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

二 轮播图

2.1 轮播图是什么

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

2.2 轮播图应用场景 

  • 首页轮播图:

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

  • 图片展示:

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

  • 广告推广

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

  • 新闻资讯:

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

2.3 制作实播图

效果图:

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

全部概要:

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

三 多方式登入

3.1多方式登入是什么

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

3.3 多方式登入实现

全部概要:  

实现流程:

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

附带ERP登入案例:

四 左侧菜单栏

4.1左侧菜单栏是什么

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

4.2 左侧菜单栏实现

效果:

全部概要: 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1320080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日好题-A+B problem 高精度的加法和进位计算

C - A B Problem Description 给定两个整数 A,B,计算AB 的值,并计算出现进位的次数。 Input 两个整数 A,B(0≤A,B≤10^10^6)---没错就是10^1000000 Output 两行两个整数表示 AB 的值与出现进位的次数。 Samples Sample #1 Input 15 16 Outp…

OpenHarmony—ArkTS语言入门(构建应用页面)

上一章我们讲到了体验ArkTS,以及应ArkTS语言用页面构成,那么接下来我们接着一起学习以下内容 代码示例 上图便是前文中的页面构成的代码示例,接下来,我将逐一分析各段代码的作用: 1.如上图所示,这类以“”…

惯性导航基础知识学习----01惯性器件相关

🌈武汉大学惯性导航课程合集是入门惯导的精品课程~ 作为导航路上的鼠鼠我,要开始学习惯性导航了~ 需要达到的要求是大致了解惯导的原理等~ 后期会陆续更新惯导相关的知识和笔记等~ 🐬 本blog为 武汉大学惯性导航课程 的记录~ 感谢团队提供的开…

解决:AttributeError: module ‘scipy.misc’ has no attribute ‘imread’

解决:AttributeError: module ‘scipy.misc’ has no attribute ‘imread’ 文章目录 解决:AttributeError: module scipy.misc has no attribute imread背景报错问题报错翻译报错位置代码报错原因解决方法方法一 scipy版本回退(不推荐&#…

PyCharm的环境配置和使用

最近要开发python项目,用到了编辑器PyCharm,这款工具用起来还是很方便的,自带代码提示功能和代码格式化,报错信息提示,调试代码很方便。我用的软件版本是:PyCharm 2021.3.2 (Community Edition)&#xff0c…

S32K一运行IDE挂掉

早上还好好的,到了下午突然间就出问题了,一Debug就挂,整个IDE动不了。 查了这个地址,也没啥问题。查下smartgit看看源代码具体改了什么,发现一大堆配置文件被动了,应该不小心打开这个pe配置,导致…

ElasticSearch详细搭建以及常见错误high disk watermark [ES系列] - 第497篇

导读 历史文章(文章累计490) 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六…

日期取值(年月日…)方式

如果不熟悉日期的操作&#xff0c;想要获取相应信息时&#xff0c;可能会写出复杂的 SQL , 比如求日期的月初时间 select hiredate,to_date(to_char(hiredate,yyyy-mm)||-1,yyyy-mm-dd) as 月初 from emp where rownum<3; 其实这个一个函数即可解决&#xff0c;trunc() sele…

SpringBoot上传图片文件到七牛云

准备工作 maven pom.xml添加七牛云的sdk依赖 <dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项 七牛云上传必要的配置有&#xff1a;acces…

【Unity动画】综合案例完结-控制角色动作播放+声音配套

这个案例实现的动作并不复杂&#xff0c;主要包含一个 跳跃动作、攻击动作、还有一个包含三个动画状态的动画混合树。然后设置三个参数来控制切换。 状态机结构如下&#xff1a; 完整代码 using System.Collections; using System.Collections.Generic; using UnityEngine;pu…

智能监控平台/视频共享融合系统EasyCVR如何做到不被其他软件强制终止?具体如下

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。国标GB28181流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频…

pinia安装,持久化,统一导出

文章目录 前言Pinia 是什么&#xff1f; 一、Pinia与持久化插件 安装二、使用步骤创建 Store下面是目录结构下面是index.js代码pinia 独立维护仓库 统一导出 下面是modules目录下的user.js代码下面是main.js代码&#xff0c;整个项目只有一个main.js 前言 Pinia 是什么&#x…

如何安装运行Wagtail并结合cpolar内网穿透实现公网访问网站界面

文章目录 前言1. 安装并运行Wagtail1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具3. 实现Wagtail公网访问4. 固定的Wagtail公网地址 前言 Wagtail是一个用Python编写的开源CMS&#xff0c;建立在Django Web框架上。Wagtail 是一个基于 Django 的开源内容管理系统&#xf…

Python语言学习笔记之十二(FastAPI)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 1、认识FastAPI FastApi&#xff0c;一个用于构建API的现代、快速(高性能)的web框架。它使用Python 3.6的类型…

二叉树题目:二叉树着色游戏

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树着色游戏 出处&#xff1a;1145. 二叉树着色游戏 难度 6 级 题目描述 要求 两位玩家参与二叉树着色游戏。给定二叉树的根结点 root \textt…

亿发:数据无缝整合,实时洞察业务——深入分析ERP系统的四大业财一体化优势

"业务财务一体化"是企业数字化的核心议题之一。在业务运作过程中&#xff0c;财务记账能够实现自动、实时化。这也是传统企业资源计划&#xff08;ERP&#xff09;系统的主要价值&#xff0c;实现业务流、信息流和资金流的无缝整合&#xff0c;同时满足企业对业务风险…

深入解析Spring Boot集成MyBatis的多种方式

文章目录 1. 引言2. 传统的XML配置方式2.1 引入依赖2.2 配置数据源和MyBatis2.3 编写Mapper接口和XML映射文件2.4 使用Mapper 3. 注解配置方式3.1 引入依赖3.2 配置数据源和MyBatis3.3 编写Mapper接口3.4 使用Mapper 4. MyBatis动态SQL4.1 使用XML配置方式4.2 使用注解配置方式…

laravel的安装

laravel的安装&#xff08;Composer小皮&#xff09; Composer的安装 windows下安装 https://getcomposer.org/Composer-Setup.exe 修改镜像 阿里云&#xff1a; composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 华为云&#xff1a; compos…

时序分解 | Matlab实现DBO-VMD基于蜣螂优化算法优化VMD变分模态分解时间序列信号分解

时序分解 | Matlab实现DBO-VMD基于蜣螂优化算法优化VMD变分模态分解时间序列信号分解 目录 时序分解 | Matlab实现DBO-VMD基于蜣螂优化算法优化VMD变分模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.利用蜣螂优化算法优化VMD中的参数k、a&…

带你了解OpenCV4工业缺陷检测的六种方法

文章目录 OpenCV4工业缺陷检测的六种方法机器视觉缺陷检测1. 工业上常见缺陷检测方法方法一&#xff1a;基于简单二值图像分析实现划痕提取&#xff0c;效果如下&#xff1a;方法二&#xff1a;复杂背景下的图像缺陷分析&#xff0c;基于频域增强的方法实现缺陷检测&#xff0c…