Axure实战06:创建一个AppleSymbol图标库网站

在本章中，你将学会如何使用Axure中继器和内联框架创建一个AppleSymbol图标库网站。
项目背景
在我们开发iOS应用程序过程，常常会用到图标按钮，Apple提供了一整套官网的图标，开发人员可以直接使用Apple设计的官网图标快速开发App。
但遗憾的是，目前这套AppleSymbol图标库目前只有dmg下载安装的版本，这就对于非苹果的开发者、MacBook低储存用户非常不友好。
于是乎，我们看看能不能做个在线版本的AppleSymbol图标库，收录常用的图标供用户直接使用。
说干就干。

项目创建
首先，创建一个新项目，命名为AppleSymbol。

基础样式-侧边导航栏
我们先分析下AppleSymbol图标库网站的结构，它由一个侧边导航栏和内容展示区组成，当我们点击侧边导航栏的菜单时，右侧内容区域将展示不同的内容。
在这里我们使用到的组件是：动态面板、内联框架、中继器，分别实现侧边导航栏、内容区域、内容展示。
首先是侧边导航栏，我们拖入一个动态面板放在左侧，在样式工具栏中，设置它的位置为0,0，尺寸是256*955，并填充动态面板的背景颜色为#001529。

为了让侧边导航栏放在左边，我们需要固定侧边导航栏的动态面板。
我们在样式工具栏中设置“固定到浏览器”，设置水平固定为“左侧”，垂直固定为“顶部”。

接下来完成里面的内容。
我们双击动态面板进入动态面板内部，拖入一个矩形1组件，在样式工具栏中，修改它的位置为（13，20），尺寸为230*52，填充颜色为透明色，线段宽度为0；
双击矩形1，输入文字“导航菜单”，字体大小为14号字，字体颜色为#FFFFFF。

下面，我们添加交互样式。
在交互工具栏中，我们点击“新建交互”，选择“单击时”，选择“设置选中”，选中目标“当前”，值为“真”。
在下面“交互样式”一栏中，设置“鼠标悬停时”的交互为勾选“填充颜色”，设置颜色为#1890FF。
同理，设置“元件选中的样式”，勾选“填充颜色”，设置颜色为#1890FF。

我们复制6个“导航菜单”的矩形，修改里面的文字为“常用功能”、“增删改查”、“上下左右”、“收藏点赞”、“消息提醒”、“硬件设备”。
矩形居中对齐，间距为10，可自行调节矩形间的间距。

交互动作-侧边导航栏
为了实现单选的效果，我们需要选中一个侧边导航栏菜单时，选中单个。
这里引用“选项组”的概念，选项组中，交互唯一。
我们为每一个菜单都设置选中的时候加背景颜色，只需要把所有的导航菜单结合在一个选项组中，即可实现单选互斥选中的效果。
选中全部导航菜单，右键选择“选项组”。

给选项组命名为“导航菜单”。
这样我们就实现了侧边导航栏的单选效果。

我们点击预览看看效果。

基础样式-内容区域
下面，我们设计下内容区域。
这里我们用到的组件叫做“内联框架”，它可以链接展示外部地址网站，也可以链接内部创建好的页面。
我们这里有7个菜单，我们在“页面”工具栏中先创建7个页面。

然后还是在AppleSymbol页面中，拖入一个“内联框架”组件，把它放在侧边导航栏右边，尺寸设置为1350*955。
顺便设置它的样式，勾选“隐藏边框”，设置滚动模式为“从不滚动”。