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 ...
随机推荐
- cordova把我搞晕了
天啦,搞了几十次,这次求你成功好吗?
- Linux系统安装Tomcat——.tar.gz版(old)
这里简单地阐述一下rpm.deb.tar.gz的区别. rpm格式的软件包适用于基于Red Hat发行版的系统,如Red Hat Linux.SUSE.Fedora. deb格式的软件包则是适用于基于 ...
- DedeCms常用内容调用标签实例大全
一.调用顶级栏目标签 <a href="{dede:global.cfg_cmsurl/}/" class="ahov">首页</a> ...
- 开发者福音!面向Web场景的云开发服务正式开放!
导 语 继支持小程序开发之后,云开发也支持Web使用啦!开发者们可以使用云开发提供的云端能力,直接开发网站应用,如PC端网页.公众号中的网页等.由此开发者可以在网站应用中借助云函数实现业务逻辑,通过与 ...
- 通过OpenGL理解前端渲染原理(1)
一.OpenGL OpenGL,是一套绘制3D图形的API,当然它也可以用来绘制2D的物体.OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是显卡的制造者.我们买的显卡都支 ...
- 基于高德开放平台的 NODE 天气信息组件
看看了画在手上的Armani手表,马上就快到了下班的时间了,心里总觉的空唠唠的, 好像空缺了什么一样,仔细的想了一想,微微叹了一口气,觉得是时候在这里和大家分享一下原因了........ 首先: ## ...
- Ubuntu下Mongo的安装和笔记
在linux下的安装 打开https://www.mongodb.com/download-center#community选择linux然后选择自己的Version复制DOWNLOAD旁边的链接 打 ...
- UE4中UMG与C++交互 页面文本修改
在UE4中,有两种方式创建ui,一种是使用slate的方式,一种是UMG,UMG是slate的封装,是一个可视化的ui编辑器.slate则是纯c++方式(之前实验过一次slate创建页面,代码相当麻烦 ...
- UE4 游戏模块初始化顺序
最近看教学,有个讲解UE4初始化顺序的,记录一下. 首先创建一个Actor,Character,GameInstance,GameMode,LevelScriptActor(关卡),PlayerCon ...
- Oracle DBLink跨数据库访问SQL server数据同步 踩坑实录
项目需求:这里暂且叫A公司吧,A公司有一套人事管理软件,需要与我们公司的软件做人员信息同步,A公司用的是SQL server数据库,我们公司用的Oracle,接口都不会开发(一万句"fuck ...