axure 元件库(动态面板、中继器)基本使用!!!

本文介绍了Axure这一专业快速原型设计工具的基本概念及其在前端领域的应用。重点讲解了动态面板和中继器的使用方法,包括如何制作轮播图及按钮对应变色效果,以及如何利用中继器快速构建表格结构。

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

axure总览

axure是一个专业的快速原型设计工具。
所谓原型,即形式或模型;那原型在axure当中指的就是软件模型(产品或数据系统的一个基本的实用模型)。
软件原型包含但不限于:功能、交互、IU。

在前端领域来说 ,axure是设计软件模型的一个基本的实用工具。
以下对在最近的axure学习中遇到的问题做一个总结吧。axure界面

元件库

元件库当中,动态面板和中继器使用频率较高,需要熟悉掌握。

动态面板

包含多个状态,通过一些事件对动态面板的状态进行切换,但在任何时候有一个状态可见,或者整个动态面板都是被隐藏的。
那么什么时候我们需要用到动态面板呢?就用经典的轮播图来说吧。
轮播图就是一个指定的区域切换状态,呈现更丰富的内容。
方法如下:

  1. 拖动动态面板到编辑区域
  2. 给动态面板添加4个状态在这里插入图片描述
  3. 双击状态1进入状态1编辑区域,添加图像,状态234同理在这里插入图片描述
  4. 单击动态面板在属性的交互事件中找到载入时;双击进入设置,找到设置面板状态,如图片操作; 在这里插入图片描述点击确定,发送预览,就可以看到四张图片自动轮播了。

这个学会我们进阶到以下操作:在这里插入图片描述只有在刚刚轮播的基础上添加三步就可以实现按钮对应变色功能了。

  1. 添加4个椭圆并设置当选中时想要变换的颜色

在这里插入图片描述
2. 椭圆与动态面板建立连接,连接点在哪?那就是每个状态改变的时候椭圆也要变色,事件就是当面板状态发生改变时,那么怎么能实现椭圆变色与图片一一对应呢?九需要设置条件,比如面板状态切换到状态1的时候,设置选中椭圆1的值为真,其他三个椭圆的值为假。在这里插入图片描述

  1. 有几个状态就需要设置几次,这样你便可以得到一个简单有营养的轮播图啦。哈哈哈哈哈~

中继器

中继器相当于一个模板,构造一个表格,往表格当中有序的添加东西,提供增删改查等功能。那么中继器应用于哪里呢?以下图片给大家一个参考。在这里插入图片描述使用中继器能够快速完成这种结构的搭建,只需要3步走

  1. 拖拽一个中继器,双击点进。开始设置表格样式

  2. 填写中继器属性中的数据库表格在这里插入图片描述

  3. 表格内容与中继器样式建立连接
    在这里插入图片描述
    这里还有两个网址:
    iconfont: https://www.iconfont.cn/.
    fontawesome : https://fontawesome.com/.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值