共计 1298 个字符,预计需要花费 4 分钟才能阅读完成。
在本章中,你将学会如何应用 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。
顺便设置它的款式,勾选“暗藏边框”,设置滚动模式为“从不滚动”。