本文为Axure RT7.0教程,本章主要介绍menu菜单、table表格、Tree Widget 树部件三个部件,后续将持续更新......

Menu 菜单

常用案例

网站导航
菜单部件通常用于母板之中,其目的是在原型中跳转到不同页面。

编辑菜单
要编辑菜单,右键点击在弹出的上下文菜单中选择 在之前/之后新增菜单项、删除菜单、新增子菜单。

菜单样式
使用工具栏或部件样式面板可以编辑菜单样式,如填充颜色,字体颜色,字体大小等,需要注意的是子菜单是通过父菜单获取格式的。
要自定义菜单样式,参见 弹出菜单案例

菜单的交互样式
菜单可以添加交互样式:鼠标悬停时/鼠标按下时/选中,选择要添加样式的菜单(可以按住Ctrl多选)右键选择交互样式,或者在部件属性中设置。
需要注意的是,设置的交互样式被应用到哪里。如:仅该菜单项、仅该菜单、该菜单及所有子菜单。
案例下载查看演示

常用交互

点击菜单项打开新页面
使用菜单项链接到其他页面或外部链接是使用最普遍的方式。

菜单部件的局限性
1. 无法嵌入图标和部件。但是,你可以通过创建自定义菜单来实现。
2. 无法点击展开子菜单。菜单部件默认是鼠标悬停展示子菜单的。

Tabel表格

组织数据
通常用来通过交互(如点击鼠标)在单元格中动态显示数据。

添加/删除行和列
要添加行/列,选择单元格点击右键,在上下文菜单中选则插入/删除行或列。

添加/删除行或列
要增加/删除表格的行或列,请将鼠标悬停在列表的顶部或侧面,当鼠标转变为黑色小三角时点击右键,选择增加/删除行或列。

填充表单内容到表格
将文本输入框的内容动态传递给表格是一种常用方式。提交按钮上的事件使用了局部变量,当鼠标点击时 设置 单元格的文本 = 文本输入框中的文本。
案例下载查看演示

点击单元格显示面板
和上面的例子相似,点击编辑按钮显示含有编辑内容的动态面板,重新编辑后点击提交按钮,单元格内容改变,动态面板隐藏。
案例下载查看效果交互样式
表格中的单元格可以设置 鼠标悬停时/鼠标按下时/ 选中的交互样式,右键点击选中的单元格(可以同时按下Ctrl进行多选),然后在部件属性面板中设置交互样式。

表格的局限性
1.鼠标单击单元格无法输入文字,单元格默认要双击才可以输入文字。要实现单击输入文字状态,可以使用 Text Field 部件覆盖在单元格上面。
2.不能同时添加多行或多列,表格只允许每次添加一行或一列。
3.不能动态添加行或列。如果你希望使用动态添加行/列功能,请使用 中继器部件Repeater.
4.不能对表格中的数据进行排序和过滤。

Tree Widget 树部件

文件浏览
树部件可以用来模拟一个文件浏览器,点击不同的节点将隐藏和显示一个动态面板的不同状态。
当一个页面内有太多交互的时候,点击树节点也常被用来跳转到新页面。

编辑树节点

添加/删除树节点
右键点击一个节点,在弹出菜单中你可以添加/删除/移动节点。添加子节点将会添加到该节点的下一层。
在该节点前/后添加,是同级节点。

添加树节点图标
给你的树部件添加自定义图标,右键点击一个节点并选择编辑图标,导入一个图标,并选择应用到:该节点/同级节点或该节点、同级节点和所有子节点。关闭对话框,然后右键点击树 -- 编辑树属性,在弹出窗口中勾选 显示图标。

自定义展开/收缩图标
点击右键 -- 编辑树属性,在弹出的对话框中或部件属性面板中,可自定义展开/收缩图标。

树节点的交互样式
树节点可以添加鼠标悬停时/鼠标按下时/选中时的样式,右键点击树节点选择交互样式,或者在部件属性面板中设置。
案例下载查看效果树部件的局限性
1. 包含树部件的边框不能自定义格式。如果想制作自定义的树部件,请使用动态面板组合可以制作出你想要的效果。
2. 树节点可以上传图标,但是不能动态隐藏/显示嵌入到树节点中的部件。

本文为作者金乌投稿发布,转载请注明来源于人人都是产品经理并附带本文链接:《[教程]AxureRP7.0部件详解(一)

[转载]AxureRP 7.0部件详解(一)的更多相关文章

  1. Android 之窗口小部件详解(三)  部分转载

    原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...

  2. Cocos2d-x 3.0坐标系详解(转载)

    Cocos2d-x 3.0坐标系详解 Cocos2d-x坐标系和OpenGL坐标系相同,都是起源于笛卡尔坐标系. 笛卡尔坐标系 笛卡尔坐标系中定义右手系原点在左下角,x向右,y向上,z向外,OpenG ...

  3. Android 之窗口小部件详解--App Widget

    Android 之窗口小部件详解--App Widget  版本号 说明 作者 日期  1.0  添加App Widge介绍和示例  Sky Wang 2013/06/27        1 App ...

  4. NPOI2.2.0.0实例详解(十)—设置EXCEL单元格【文本格式】 NPOI 单元格 格式设为文本 HSSFDataFormat

    NPOI2.2.0.0实例详解(十)—设置EXCEL单元格[文本格式] 2015年12月10日 09:55:17 阅读数:3150 using System; using System.Collect ...

  5. windows版mysql8.0安装详解

    2018年07月04日 13:37:40 Zn昕 阅读数 6433更多 分类专栏: mysql   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. ...

  6. [转载]java中import作用详解

    [转载]java中import作用详解 来源: https://blog.csdn.net/qq_25665807/article/details/74747868 这篇博客讲的真的很清楚,这个作者很 ...

  7. 第15.34节 PyQt(Python+Qt)入门学习:containers容器类部件QStackedWidget堆叠窗口部件详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 StackedWidget堆叠窗口部件为一系列窗口部件的堆叠,对应类为QStackedWi ...

  8. Android消息传递之EventBus 3.0使用详解

    前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...

  9. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

随机推荐

  1. Android--Sensor传感器

    前言 Android提供了对设备传感器的支持,只要Android设备的硬件提供了这些传感器,Android应用可以通过传感器来获取设备的外界条件,包括手机的运行状态.当前摆放的方向等.Android系 ...

  2. Scala 深入浅出实战经典 第47讲:Scala多重界定代码实战及其在Spark中的应用

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. Scala 深入浅出实战经典 第41讲:List继承体系实现内幕和方法操作源码揭秘

    Scala 深入浅出实战经典 第41讲:List继承体系实现内幕和方法操作源码揭秘 package com.parllay.scala.dataset /** * Created by richard ...

  4. BitNami 里有好多开源软件

    https://bitnami.com/stacks BitNami 提供wordpress.joomla.drupal.bbpress等开源程序的傻瓜式安装包下载,所有的安装包内置了服务器环境,就是 ...

  5. Azure SoftEther VPN

    装个vs2015,想装全组建还得爬墙… 曾经的 Azure OpenVPN 项目 (http://azure-openvpn.github.io/) 好几年木有更新 改用 SoftEther VPN ...

  6. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  7. 2014年黑金FPGA原创教程规划发布

    2014年已经过去快一半了,才出黑金2014年的FPGA原创教程规划,有点对不起大家了,哈哈! 俗话说,亡羊补牢,为时不晚,希望大家谅解啊,对于大家的支持,我们黑金人一向是感激.感恩.感谢! 下面大概 ...

  8. iOS 日期处理 (Swift3.0 NSDate)

    处理日期的常见情景 NSDate -> String & String -> NSDate 日期比较 日期计算(基于参考日期 +/- 一定时间) 计算日期间的差异 拆解NSDate ...

  9. Nginx模块开发时unknown directive "echo"的处理

    实际上,Nginx并没有echo这个指令,所以你贸然使用时,自然会提示说无法识别的指令,处理方法有两个: 方法一是: 从下面连接下载echo-nginx-module模块并安装: https://gi ...

  10. linq join多字段

    from VS in m2db.Inf_VehicleSale join RS1 in m2db.His_RecSale on new { VS.vehicleCode, auctionCode=VS ...