ionic3-ng4学习见闻--(自定义ion-tab图标)
学习混合开发语言,目的就是为了快速开发一个适用于多平台的app。
app基本都会有footer,也就是tabbar,用来快速导航不同的页面。
ionic也有这个组件,ion-tab。
常用方法如下:
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Tabs</ion-title>
</ion-navbar>
</ion-header>
<ion-content></ion-content>
`
})
class TabContentPage {
constructor() {}
} @Component({
template: `
<ion-tabs>
<ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
<ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
<ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
<ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
</ion-tabs>`
})
export class TabsIconPage {
constructor() {
this.tab1 = TabContentPage;
this.tab2 = TabContentPage;
...
}
}
其中,<ion-tab tabIcon="contact" [root]="tab1"></ion-tab>代表其中一个tab按钮
tabIcon就是按钮的图标了,ionic自带的图标,我们只需要写图标的name就好了。
这个小例子中,ionic就会自动加上ion-[平台类型]-[图标name]-[选中或否],渲染到页面选中状态就是<ion-icon class='icon ion-ios-contact'></ion-icon>
如果是未选中就是<ion-icon class='icon ion-ios-contact-outline'></ion-icon>
找到规律了就好办了。
本例以iconfont为参考:
打开iconfont,
首先设置图标项目或者图标 的 前缀和字体样式,
1.前缀一定为 'ion'
2.字体样式为自定义,无所谓的
之后
设置图标(这里是选中状态)
这里为ios-图标名字或md-图标名字,也就是说 同一个图标,我们需要定义2套 名字不同,分别对应ios 和 android。
在这里我只定义ios
(这里是未选中状态)
按照上述,将所有的tab 所需的图标 设置好,就可以下载素材了。
选择 font class 下载到本地,你会拿到一个压缩包
选中这几个文件就够了,其他的都是demo。
放到项目的assets/fonts目录下,没有fonts的自己创建,
在app.scss里面引入iconfont.css后
就可以使用了,
tabIcon直接写图标中的name就好了,例如上面的workbench,它会自动补全。
除此之外,
还要在tab的样式中指定使用的字体,
.tab-button {
&>ion-icon {
font-family: "hec4_ng4_ionic3" !important;
/*指定在当前组件中的ion-icon使用的字体名称*/
}
}
如果想要改tab激活后的颜色
还要加上
$tab-color:这里自定义颜色
.tab-button[aria-selected=true] {
color: $tab-color!important;
.tab-button-icon {
color: $tab-color!important;
}
}
ion-tab自定义图标到这里就结束了
效果如下
ionic3-ng4学习见闻--(自定义ion-tab图标)的更多相关文章
- ionic ion-tab图标修改, 自定义tab图标
遇到需要自定义tab图标很简单, 只需要自定义相应的css就可以了, 这里要注意的是如何调整背景图片的大小. <ion-view hide-back-button="false&quo ...
- ionic3之自定义tabs菜单图标
请参考以下链接 ionic3之自定义tabs菜单图标
- Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论
Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论 创建用户自定义的类加载器 要创建用户自定义的类加载器,只需要扩展java.lang.ClassLoader类,然后覆盖它的f ...
- Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是 --阿里巴巴矢量图标库 -网 ...
- WebAPI调用笔记 ASP.NET CORE 学习之自定义异常处理 MySQL数据库查询优化建议 .NET操作XML文件之泛型集合的序列化与反序列化 Asp.Net Core 轻松学-多线程之Task快速上手 Asp.Net Core 轻松学-多线程之Task(补充)
WebAPI调用笔记 前言 即时通信项目中初次调用OA接口遇到了一些问题,因为本人从业后几乎一直做CS端项目,一个简单的WebAPI调用居然浪费了不少时间,特此记录. 接口描述 首先说明一下,基于 ...
- UnityEditor研究学习之自定义Editor
UnityEditor研究学习之自定义Editor 今天我们来研究下Unity3d中自定义Editor,这个会让物体的脚本在Inspector视窗中,产生不同的视觉效果. 什么意思,举个例子,比如游戏 ...
- iOS学习笔记-自定义过渡动画
代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...
- 日常学习随笔-自定义了一个MyArrayListDefin集合(数组扩容+迭代器+JDK1.8新方法+详细说明)
一.自定义了一个ArrayList的模拟集合(源码+详细说明) 前段时间分析了下ArrayList集合的源码,总觉得如果不自己定义一个的话,好像缺了点什么,所以有了如下的代码. 代码可以说是逐行注释了 ...
- Google C++测试框架系列高级篇:第二章 让GTest学习打印自定义对象
上一篇:更多关于断言的知识 原始链接:Teaching Google Test How to Print Your Values 词汇表 版本号:v_0.1 让GTest学习打印自定义对象 当一个断言 ...
随机推荐
- New UWP Community Toolkit - DropShadowPanel
概述 UWP Community Toolkit 中有一个为 Frmework Element 提供投影效果的控件 - DropShadowPanel,本篇我们结合代码详细讲解 DropShado ...
- C# 一个初学者对 依赖注入 IOC 的理解( 含 Unity 的使用)
通过 人打电话 来谈谈自己对IOC的理解 版本1.0 public class Person { public AndroidPhone Phone { get; set; } public void ...
- python全栈开发-常用模块的一些应用
一.random模块详解 1.概述 首先我们看到这个单词是随机的意思,他在python中的主要用于一些随机数,或者需要写一些随机数的代码,下面我们就来整理他的一些用法 2.常用方法 1. random ...
- Jenkins中展示HTML测试报告
背景:测试报告是用reportNG生成的,属于java自动化测试项目. 1) 安装插件 首先要安装HTML Publisher plugin,这个在插件管理里面搜索并安装即可,如下我已 ...
- apacheds的客户端
Apache DS管理的JAVA实现 LdapConnection connection = new LdapNetworkConnection("localhost", 1038 ...
- SSO的全方位解决方案 - Kerberos协议(RFC 1510)
一.桌面SSO和WEB-SSO的局限性 前面我们的解决方案(桌面SSO和WEB-SSO)都有一个共性:要想将一个应用集成到我们的SSO解决方案中,或多或少的需要修改应用程序. Web应用需要配置一个我 ...
- 在类的成员函数中调用delete this
最近面试的时候被问到一个问题是,在C++中,能否在类的成员函数中调用delete this,后来网上查了一下资料,关于这个问题说得比较好的有http://blog.sina.com.cn/s/blog ...
- git的理论基础
GIT是目前世界上最先进最牛逼的分布式版本控制系统git维护的三棵树分别是工作区域.暂存区域.git仓库工作区域:就是你平时存放项目代码的地方暂存区域:用于临时存放你的改动,事实上它只是一个文件,保存 ...
- 用委托(Delegate)的BeginInvoke和EndInvoke方法操作线程
让我们首先了解下什么时候用到C#异步调用: .NET Framework 允许您C#异步调用任何方法.定义与您需要调用的方法具有相同签名的委托:公共语言运行库将自动为该委托定义具有适当签名的Begin ...
- [LeetCode] K Empty Slots K个空槽
There is a garden with N slots. In each slot, there is a flower. The N flowers will bloom one by one ...