ionic 删除返回按钮文字,及自定义nav两侧的按钮和title格式
1、删除返回按钮文字
1)可以在app.js进行配置
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('center'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-ios-arrow-back');
2)如果上面行不通,那么就去改源码 如下所示
打开lib下的ionic.bundle.js
注释掉下面这句代码:
// buttonEle.appendChild(buttonTextEle);
function hasIconClass(ele) {
return /ion-|icon/.test(ele.className);
} var defaultIcon = $ionicConfig.backButton.icon();
if (!hasIcon && defaultIcon && defaultIcon !== 'none') {
buttonEle.innerHTML = '<i class="icon ' + defaultIcon + '"></i> ' + buttonEle.innerHTML;
buttonEle.className += ' button-clear';
} if (!hasInnerText) {
var buttonTextEle = $document[0].createElement('span');
buttonTextEle.className = 'back-text'; if (!hasButtonText && $ionicConfig.backButton.text()) {
buttonTextEle.innerHTML += '<span class="default-title">' + $ionicConfig.backButton.text() + '</span>';
}
if (!hasPreviousTitle && $ionicConfig.backButton.previousTitleText()) {
buttonTextEle.innerHTML += '<span class="previous-title"></span>';
}
// buttonEle.appendChild(buttonTextEle); }
2、隐藏默认返回按钮
在ion-view标签加上 hide-back-button="true" 即可;
3、自定义Nav两侧的button及Nav的title
1)两侧按钮
//nav左边功能按钮
<ion-nav-buttons side="left">
<button class="button button-clear">
<i class="icon ion-ios-chatbubble-outline"></i>
</button>
</ion-nav-buttons>
//nav右边功能按钮
<ion-nav-buttons side="right">
<button class="button button-clear">
<i class="icon ion-ios-chatbubble-outline"></i>
</button>
</ion-nav-buttons>
2)Nav的title
//ion-nav-title 标签里面的内容随便改
<ion-nav-title>
<h1 class="title"> 购物车</h1>
</ion-nav-title>
ionic 删除返回按钮文字,及自定义nav两侧的按钮和title格式的更多相关文章
- Ionic3学习笔记(四)修改返回按钮文字、颜色
本文为原创文章,转载请标明出处 目录 修改返回按钮文字 修改返回按钮颜色 1. 修改返回按钮文字 参考官网 Ionic API---Config 文档 可在 ./src/app/app.module. ...
- Swift - 修改导航栏“返回”按钮文字和图标 /手势冲突解决/响应范围
iOS11之前 修改导航栏“返回”按钮文字,图标 https://blog.csdn.net/u012701023/article/details/50264265 iOS11 完美解决导航栏按钮偏移 ...
- Swift - 修改导航栏“返回”按钮文字,图标
Swift - 修改导航栏“返回”按钮文字,图标 2015-11-27 09:13发布:hangge浏览:4037 项目中常常会使用 UINavigationController 对各个页面进行导 ...
- iOS7 修改导航系统默认返回按钮文字及颜色
//iOS7 修改系统默认返回按钮文字及颜色 UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返" ...
- iOS 设置导航栏 返回按钮文字隐藏
//隐藏返回按钮文字 [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -60) f ...
- 【转】自定义iOS的Back按钮(backBarButtonItem)和pop交互手势(interactivepopgesturerecognizer) --- 不错
原文网址:http://blog.csdn.net/joonsheng/article/details/41362499 序 说到自定义UINavigetionController的返回按钮,iOS7 ...
- 如何得到自定义UITableViewCell中的按钮所在的cell的indexPath.row
在自定义UITableViewCell中创建了一个按钮. 想在点击该按钮时知道该按钮所在的cell在TableView中的行数.就是cell的 indexPath.row两种方法都很好.-(IBAct ...
- 自定义jQuery Mobile工具栏按钮
自定义jQuery Mobile工具栏按钮 1.实现效果
- Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制
一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...
随机推荐
- jmeter性能小试全流程
大纲: 1.添加线程组:虚拟用户 2.添加测试对象:比如http请求 3.查看结果 一.添加线程组. 1.线程是what: JMeter是由Java实现的,并且使用一个Java线程来模拟一个用户,因此 ...
- 小白学python-day04-作业-九九乘法表相关
作业内容: 作业一: 作业二: 作业三: (1) (2) \n换行 \t制表符 end="" 代表打印不换行,双引号里面可以在结果之间加字符. print() 代表换行打印,使用时 ...
- PHP使用array_unique对二维数组去重处理
去重,点这里,东西是好东西,就是有点懒.莫见怪
- vuex的实现
源代码可以查看我的github: https://github.com/Jasonwang911/TryHardEveryDay/tree/master/Vuex/vuex-resouce 欢迎s ...
- 【译】在 Linux 上不安装 Mono 构建 .NET Framework 类库
在这篇文章中,我展示了如何在Linux上构建针对.NET Framework版本的.NET项目,而不使用Mono.通用使用微软新发布的 Mocrosoft.NETFramework.Reference ...
- 电信光猫带路由器(F452)的虚拟服务器端口映射
现在电信宽带的光猫一般都自带路由器功能,为了方便运营商管理网络用户,电信公司插入了企业局域网,网络用户的光猫路由器都是这个局域网的节点.用户家里的电脑在网络中的结构位置一般如下所示: 互联网(公网)= ...
- CentOS 7.3下使用YUM 安装MySQL5.6
1.检查Linux系统中是否已安装 MySQL rpm -qa | grep mysql 返回空值的话,就说明没有安装 MySQL 注意:在新版本的CentOS7中,默认的数据库已更新为了Mariad ...
- vue通信、传值的多种方式(详细)
转载自https://blog.csdn.net/qq_35430000/article/details/79291287
- Spring Cloud 相关资料链接
Spring Cloud中文网:https://springcloud.cc/ Spring Cloud API:https://springcloud.cc/spring-cloud-dalston ...
- JAVA基础知识(六)Java 静态多分派&动态单分派
1.分派发生在编译期和运行期,编译期的分派为静态分派,运行期的为动态分派. 2.编译期是根据对象声明的类型来选择方法,运行期是根据对象实际类型来选择方法. 3.单分派和多分派取决于宗量, 方法调用者和 ...