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 ...
随机推荐
- Appium+python自动化(二十三)- 真假美猴王Monkeyrunner与Monkey傻傻的分不清楚(超详解)
简介 看<西游记>第五十七回,说是“六耳猕猴”化作孙悟空的摸样,伤了唐僧,后又和孙悟空大打出手…… 这位假孙悟空,实力不用多说了吧,和真孙悟空一般无二,大战孙悟空,闹到上天入地下海. 在唐 ...
- HTML介绍和标签
1.HTML介绍 1.概述 html不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体,颜色,大小等. 超文本:音频,视频,图片称为超文本. 标记:<英文单词或者字 ...
- ArcGIS API For JavaScript 开发(一)环境搭建
标签:B/S结构开发,Asp.Net开发,WebGIS开发 前言:为什么写这个,一是学习:二是分享,共同进步,毕竟也是在这个园子里学到了很多: (一)环境搭建 集成开发环境:VS2013 Ultima ...
- Java EE.JSP.动作组件
常见的JSP动作组件有以下几种: 1)<jsp:include>:在页面被请求的时候引入一个文件 2)<jsp:param>:在动作组件中引入参数信息 3)<jsp:fo ...
- angularjs compine和link的区别
[译]ng指令中的compile与link函数解析 04 September 2014 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre ...
- mysql协议分析2---认证包
主人看到navicat和mysql在那嘻嘻哈哈,眉来眼去的,好不快乐,忽然也想自己写个程序,直接去访问Mysql,虽然现在已经有很多现成的中间件可以直接拿来用了,程序只要负责写sql语句就行了,但是主 ...
- CSDN 免积分下载
你可能不相信这个标题,那么打开下面的链接试试吧 ↓↓↓ Github项目 最新功能 ↓↓↓ 0积分资源搜索 0积分资源搜索(备用地址) CSDN资源导出 CSDN资源下载体验群 (每日可免费下载一次) ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- Kotlin学习快速入门(3)——类 继承 接口
类 参考链接 类定义格式 使用class关键字定义,格式如下: class T{ //属性 //构造函数 //函数 //内部类 } Java Bean类 java bean类 //java bean类 ...
- C语言编程入门之--第三章编写第一个C语言程序
第三章 编写第一个C语言程序 导读:一般学一门计算机语言的第一堂上机课(“上机”顾名思义,上了计算机),就是往屏幕输出“hello world”,本章也不例外. 1.1 Hello,World! 这一 ...