- 版本:1810
- 设计制作：【颢丰阁】·丰
- 适用版本：Axure RP 8
- 更新时间：2018-10-31
主要功能说明
- 所有页面通过内联框架进行调用，配置完主框架后，内容页面无需配置其他菜单、弹窗、消息提醒、导航、页头、页尾等内容
- 暗黑系管理后台风格
- 自适应浏览器大小
- 自动展示面包屑
- 多事件的支持错误信息提示的登录框架
- 右上角浮动信息提示
- 左下角站内消息提示
- 全局弹窗组件
- 多集动态菜单框架
- 支持动态效果的页面Tab组件
- 支持动态效果的开关切换组件
- 支持动态效果的基石查询组件（包含多选和单选）
- 支持动态效果的复选组件
- 支持动态效果的滑动条组件
- 支持动态效果的列表式多选组件
- 支持动态效果的列表式单选组件
- 支持动态效果的下拉菜单
- 支持动态效果的下拉选项
- 常用静态组件：普通信息提示、重要信息提示、按钮、文本框、表格
组件演示地址
https://axhub.im/pro/85027f87ad5b1835
开始使用
下载并导入组件
打开Axure RP 8，在左侧元件库中点击：菜单 > 导入元件库……

选择刚解压缩出来的文件：hfge.dark_1810.rplib，导入完成后，看到新添加的元件库，下面就可以开始使用了。
全局设置
在正式开始使用之前，需要先做一下全局设置。
在菜单中找到：项目 > 页面样式编辑……
配置背景色：#242635

创建登录页
新建一个页面，命名为Login，在我们导入的组件中找到登录窗口，拖动到页面中，建议直接放到左上角0,0的位置，可以预览看一下，整个登录窗口会自动在页面居中展示。

修改提示信息
- 主窗口中双击新添加的组件，双击打开动态面板中的
State 1状态； - 选中
登录按钮，在右侧属性栏中可以看到不同的触发事件； - 双击
用户名密码正确、用户密码错误、权限未开通即可修改对应的事件； - 修改事件中的
ErrMsg的值即为错误提示信息； - 建议新增其他事件的时候，直接复制某一事件，进行修改即可保留交互方式。

创建主页面
- 左侧
页面栏位中双击index，或创建一个新的页面，并双击打开； - 在左侧
元件库中找到页面框架-页面主框架，并拖动到主页面，放置到新页面中0，0位置； - 现在可以直接点击预览看一下初步的效果了；
- 可以选中初始化说明的动态面板，点击删除，并开始下一步的使用。
主框架主要功能区域

为了跟模块化的进行设计，主框架中整合了众多的常用功能，为了更好的使用，请勿删除这些组件。
设置按钮的小红点、面包屑的背景、内联框架，请勿删除，如果不需要使用，请设置为隐藏即可。
框架中所有已经设置为组合的组合，请勿解除组合，有可能导致部分效果无法使用
菜单设置
一级导航菜单
修改导航图标
- 如果要替换图标，请下载
SVG格式（推荐从http://www.iconfont.cn下载)
 - 双击需要修改图标的选项，编辑选项的组合，可以看到如图所示：
 - 下载后的图标，拖动到页面中（在图标的组合里）
- 在右侧的
属性栏中点击转换SVG图片为形状
 - 点击
交互样式设置中的鼠标悬停，在弹出窗口中配置鼠标悬停和选中样式，勾选线段颜色3BB19C，线宽：4，如图所示：
 - 点击
样式标签，找到填充，修改颜色为E6E6E6 - 修改新的图标宽度为
20（建议锁定长宽比例进行修改） - 把原图标删除，把新图标放到该图标居中的位置（再次强调，不要解除组合，解除后将导致诸多菜单效果失效等问题）
修改导航名称（将影响导航的浮动提示组件）
直接选中一个导航按钮（组合），修改其组合名称即可，修改完成后，浮动的菜单名称提示会自动显示为导航按钮的名称。


导航按钮的增减
删除导航按钮，建议从下往上删除，不要从中间删除，否则需要修改按钮的交互事件。
- 删除按钮直接删除即可。
- 增加按钮，请选中最后一个按钮，直接复制、粘贴，形成一个副本
- 将复制出来的新组件，拖动到其他按钮的下方，请务必对其
- 修改该按钮组合的
鼠标移入时事件，双击其中的移动事件，在弹出窗口中修改Y坐标为原有值+50（如：原来最后一个按钮图标的Y坐标为310，则在其下方的按钮Y坐标修改为360即可）。
二级菜单的配置
双击二级菜单的区域，打开动态面板可以看到里面的动态面板状态列表

列表名称跟到场菜单的名称一一对应
icon1状态为二级菜单模式
icon2状态为带有三级菜单的二级菜单模式
setup状态为底部菜单模式
编辑二级菜单
- 复制
icon1，修改面板状态标题为需要关联的一级菜单（即图标）的标题，进行一一对应 - 双击打开新创建的面板状态，可以看到菜单项
- 修改每个菜单项的名称和需要跳转（在
内联框架中打开的页面） - 新增菜单项，请在菜单组合中复制一个菜单项的副本，进行修改

编辑带有三级菜单的二级菜单
- 复制
icon2，修改面板状态标题为需要关联的一级菜单（即图标）的标题，进行一一对应 - 双击打开新创建的面板状态，可以看到一个菜单项的动态面板，双击查看动态面板中存在
收起和展开两个状态，分别修改这两个状态中菜单项的文字和连接的目标页面（同编辑二级菜单）即可 - 新增二级菜单组，只需要复制这个动态面板，并放置在该动态面板的下方对齐，采用相同的方式进行编辑即可
统一弹窗组件，所有内容页中不需要单独设置弹窗，统一在主框架中配置，即可实现所有内联页面中的弹窗事件触发
在主框架中有一个隐藏的动态面板组件：
- 双击打开这个动态面板可以看到这个动态面板预制的两个状态，复制一个，修改标题为你需要触发的动作，例如：保存设置
- 双击打开它，编辑其中的内容，譬如我们修改成如下：

注意：动态面板的状态中的按钮动作，请勿删除，但可以增加您需要的事件；面板状态标题一定要跟你触发时调用的动作名称保持一致。
实战演示
之前我们已经完成了基础框架的配置，现在我们假设我们要打开的内容页面为page1，现在创建并打开page1是一个空白页面。
我们需要在主框架中的内联框架中关联这个页面。
双击页面栏中的index，打开主框架，在中间内容区域双击内联框架组件，在弹出窗口中选择page1，表示index页面打开时，在内联框架中默认加载page1。
我们在页面page1中拖入我们的组件，来进行演示。
Tab组件
Tab组件支持鼠标悬停效果、选中效果，选中项默认仅有一个
- 使用时，只需要修改tab的标题项即可
- 删除标题项可以直接删除
- 增加标题项只需要复制最后一个，往后排列，并调整相应的位置即可
- 一般tab标签与动态面板搭配使用
状态切换组件
状态切换组件，支持在开启和关闭状态之间进行切换，默认为开启状态，如果希望默认为关闭状态，可以在属性栏中将选中状态去掉即可
- 使用时，可以修改开启和关闭的默认文字和附加动作
- 分别编辑交互动作中开启和关闭动作即可
- 请勿删除条件判断

即时查询-多选组件&单选组件
多选组件支持在文本框中输入文字，下方展示查询结果，通过键盘敲击回车，即增加一个项目，最多支持3个项目，点击任意项目即可删除该项目，如果该项目不是最后一个项目，则后面的项目会自动前移动。
单选组件与多选组件雷同，不再赘述。
- 直接拖动到页面中使用，可以修改提示文字信息
复选框
Axure自带的组件比较丑陋，增加了个自制的，直接拖入页面中使用即可，可修改成自己想要的文字，如果默认为选中，则直接在属性栏中选择选中即可。

滑动条
直接拖入页面中使用，支持鼠标拖动事件，支持同步显示数值百分比，由于长度计算的问题，不建议修改长度，如果要修改长度，可自行研究其组件的各项数值配置。
下拉菜单&下拉选项
支持点击按钮展开菜单/选项列表，选中后收起菜单/选项，并修改当前组件标题文字，直接拖入使用即可。
其他组件
均直接拖入使用即可，不再赘述。
由于Axure 本身的问题，如果拖入的组件存在白底的问题，请将白底的背景色直接去掉即可。
触发站内消息
我们以点击按钮触发站内消息为例，消息内容为：您收到一条站内短信，请及时查看！
- 拖入一个按钮，修改按钮文字为：站内消息
- 在属性栏中，双击
鼠标单击时动作，添加动作全局变量-设置变量值 - 选择
msg变量，设置值为：您收到一条站内短信，请及时查看！ - 完成。当用户点击这个按钮时，主框架中就会弹出站内消息提示。

触发提示消息
我们以点击按钮触发通知消息为例，消息内容为：保存成功！
- 拖入一个按钮，修改按钮文字为：提醒消息
- 在属性栏中，双击
鼠标单击时动作，添加动作全局变量-设置变量值 - 选择
pop_msg变量，设置值为：保存成功！ - 完成。当用户点击这个按钮时，主框架中就会弹出提示消息。

触发弹窗
我们以点击按钮触发通知消息为例，消息内容为：保存成功！
- 拖入一个按钮，修改按钮文字为：保存设置
- 在属性栏中，双击
鼠标单击时动作，添加动作全局变量-设置变量值 - 选择
pop_window_name变量，设置值为：保存设置（我们之前创建了一个弹窗的动态面板，面板状态名称为：保存设置，这个名称一定要对应，否则无法实现弹窗） - 完成。当用户点击这个按钮时，主框架中就会弹出我们之前设置的保存设置的弹窗。

