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

简介: 在本章中,你将学会如何使用Axure中继器和内联框架创建一个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。
顺便设置它的样式,勾选“隐藏边框”,设置滚动模式为“从不滚动”。

相关文章
|
数据采集 存储 监控
京东商品价格和评论的数据采集监控系统
对于一个商品来说,其价格在其生命周期内几乎不可能一成不变,很多消费者需要在商品价格低于心理预期时及时收到通知,然后有概率产生购买行为,虽然这种功能可能已经在京东或者淘宝上实现了,但是对于消费者来说,知道整个周期内的具体价格变化情况也很重要,这就是商品价格监控的一个意义所在。
|
存储 数据可视化 计算机视觉
树莓派计算机视觉编程:1~5
树莓派计算机视觉编程:1~5
360 0
|
前端开发 JavaScript API
Axure实战22:使用Axure和CSS实现渐变色背景
Axure实战22:使用Axure和CSS实现渐变色背景
901 0
Axure实战22:使用Axure和CSS实现渐变色背景
Axure实战18:创建一个PRD产品需求文档生成器
Axure实战18:创建一个PRD产品需求文档生成器
1199 0
Axure实战18:创建一个PRD产品需求文档生成器
|
JSON 前端开发 Java
SpringBoot3怎么做统一结果封装?
在Spring Boot应用中,统一结果封装有助于团队协作,确保一致的API响应格式,提升代码质量和维护性。主要优点包括:简化前端集成工作,减少后端重复编码,以及增强接口的可维护性。实现上,首先定义`Result`类来封装响应状态码、消息、数据及时间戳;其次,通过`ResultCode`枚举类标准化状态信息。示例代码展示了如何构建这些类,并通过一个简单的控制器方法演示了如何使用它们返回JSON格式的响应结果。
607 2
|
前端开发 JavaScript 开发者
UI 框架:element-ui(二)
在当今快速发展的前端开发领域,用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI,作为一款基于Vue.js的组件库,以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件,帮助他们快速构建具有现代感的应用程序。 Element UI不仅注重美观的设计,还提供了良好的文档支持和社区活跃度,使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中,我们将深入探讨Element UI的基本特点、安装步骤,以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者,这篇文章都将为您开辟一条通向更高效开发的道路。
781 4
|
监控 JavaScript 前端开发
Axure实战16:使用Axure和JavaScript引用Echarts图表
Axure实战16:使用Axure和JavaScript引用Echarts图表
1355 0
Axure实战16:使用Axure和JavaScript引用Echarts图表
|
Java 定位技术 Android开发
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
908 1
|
SQL 弹性计算
服务器内自建SQL server 服务无法启动,提示评估期已过
服务器内自建SQL server 服务无法启动,提示评估期已过
|
存储 开发工具 Android开发
Android 中内部存储和外部存储的理解与应用
Android 中内部存储和外部存储的理解与应用
635 0