【Appetite】ionic3实录(二)UI分析及总体配置
UI分析,自然是提取UI上的有用信息。事先声明我不是美工,样式书写等可能会有不规范的地方。
首先,如果你是初学者,我强力建议你先看完我这篇文章: 【开发指南】(四)Ionic3快速上手并了解这些
然后,请在浏览器新开一个窗口打开这个网页,便于观察参照: http://www.zcool.com.cn/work/ZMjAyMjk5NDQ=.html
一、确定模版并创建应用
首先我们观察到应用的底部是这样的选项卡:
UI选项卡
所以我们在cli命令行创建一个基于选项卡模版的应用:
ionic start appetite tabs
等项目创建成功后,我们执行下面的命令:
cd appetite && ionic serve
便会在浏览器看到运行起来的页面:
image.png
注:命令行可以使用
Ctrl+C
终止当前命令来执行其它操作
二、项目配置
项目配置.png
注:主要修改ID。作为应用的唯一识别身份,避免和现有的应用ID重复,如在ios打包发布,若发现有相同ID,则无法打包成功。
三、应用配置
上图所示,浏览器默认使用android的样式,而UI设计图采用ios的样式,所以,为了统一也为了方便维护,我们各平台统一使用ios样式,在app.module.ts
中修改配置为:
IonicModule.forRoot(MyApp, {mode: "ios"})
四、补全基本页面
UI设计图有4个选项卡(图方便,我强制认为模版创建的三个页面就是UI的前3个选项卡的页面),同时最后一个选项卡是关于个人信息的,所以我们创建一个叫person的页面,页面最终会生成在src/pages
这个目录下面。为了入手简单点,先不使用懒加载,于是使用命令行创建页面时加上--no-module
参数:
ionic g page person --no-module
页面生成后在app.module.ts
里添加配置:
import { PersonPage } from '../pages/person/person';
@NgModule({
declarations: [
PersonPage
],
entryComponents: [
PersonPage
]
})
接着把新建的person页面关联到tabs上,同时把选项卡图标的文字去掉,tabs.html文件添加:
<ion-tab [root]="tab4Root" tabIcon="person"></ion-tab>
tabs.ts文件添加
tab4Root = PersonPage;
有人或许会说,ionic3了,都不使用懒加载?其实不是不用,只是先不用,作为入门,未学会走路就学跑,只会让自己更混乱。
五、定制应用主题样式
修改
src/theme/variables.scss
文件。
1. 留意到UI上有这样一段文字:
字体
所以我们在variables.scss
文件添加字体的配置:
$font-family-base: "HelveticaNeue-Light",
"Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
注:font-family用来定义页面字体,一般定义3-4个。第一个优先级最高。这样如果访问你网页的电脑没有安装你定义的第一个字体,它会用第二个,以此类推。如果都找不到,就用浏览器的默认字体显示你的网页
2. 留意到UI上有这样的颜色说明:
颜色说明
所以我们添加颜色的配置:
//上面4个为UI给定的,下面的为观察后认为需要的
$colors: (
primary: #FC4D6E,
secondary: #FD6F89,
dark: #655A5B,
gray: #B3A3A3,
light-gray: #d9d9d9,
light: #FFFAFA
);
3. 留意到UI上标题栏的颜色为浅白色:
便在文件上添加配置:
$toolbar-ios-background: color($colors, light);
4. 留意到UI上列表分割线为细线条及淡灰色:
分割线
添加下面配置:
$hairlines-width: 1px;
$list-border-color: color($colors, light-gray);
六、全局样式配置
留意到有背景色需求:
image.png
在app.scss
文件添加全局样式:
/*********** 背景色 start **********/
.primary-bg {
background-color: color($colors, primary)!important;
.toolbar {
.toolbar-background {
background-color: color($colors, primary)!important;
}
.toolbar-title{
color: color($colors, light)!important;
}
}
}
/*********** 背景色 end **********/
普通的元素直接修改背景色,而头部的
ion-navbar
其实是toolbar的一种,样式class为toolbar
,通过覆写子元素的样式来修改背景色。
最后我们在home.html
和about.html
的最上面的<ion-header>
标签添加该class,同时加上no-border的指令去掉底下的border线:
<ion-header class="primary-bg" no-border>
再次查看浏览器运行界面:
修改后的主界面
感觉像是一回事了吧? 为了更接近UI效果图,我们还需要添加自定义字体图标,自定义组件等,篇幅有点长了,我们把内容留到了下一章。
- 非Kerberos环境下Kafka数据到Flume进Hive表
- 6.如何为Hue配置OpenLDAP认证
- Socket 通信原理
- PHP 面试知识梳理
- 5.如何为Impala配置OpenLDAP认证
- 传统Spring项目使用FeignClient组件访问微服务
- 4. 如何为Hive配置OpenLDAP认证
- 3.如何实现OpenLDAP的主主同步
- 2.OpenLDAP集成SSH登录并使用SSSD同步用户
- 1.如何在CentOS6.5安装OpenLDAP并配置客户端
- PHP 面试知识梳理
- 如何修改CM及CDH元数据库配置
- 如何实现CDH元数据库MySQL的高可用
- 如何实现CDH元数据库MySQL的主主互备
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法