Ionic3学习笔记（四）修改返回按钮文字、颜色

最新推荐文章于 2018-09-21 17:37:50 发布

原创最新推荐文章于 2018-09-21 17:37:50 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ionic3

Coding 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何通过Ionic框架自定义应用程序中的返回按钮文字与颜色。提供了具体的修改位置及配置方法，帮助开发者轻松调整以匹配应用风格。

本文为原创文章，转载请标明出处

1. 修改返回按钮文字

参考官网 Ionic API—Config 文档
可在 ./src/app/app.module.ts 中修改返回按钮文字

@NgModule({

  ......

  imports: [
    IonicModule.forRoot(MyApp, {
      backButtonText: ''
    })
  ]

  ......

})

2. 修改返回按钮颜色

参考官网 Overriding Ionic Sass Variables 文档
可在 ./src/theme/variables.scss 中修改返回按钮颜色

$toolbar-ios-button-color: #222;

如有不当之处，请予指正，谢谢～

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MetaphorXi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ionic2如何处理android硬件返回按钮

01-20

问题注册安卓硬件返回按钮事件...3.按一下提示，按两下退出（加一个方法用toast提醒）。这里用第三种展示。解决在app.html中，添加#myNav，在app.component.ts文件通过@ViewChild(‘myNav’)获取： <ion-nav #my

ionic3开发笔记

08-30

### ionic3开发笔记知识点概览 #### 一、Ionic框架简介 Ionic是一个开源的前端框架，用于构建高质量的跨平台移动应用。它基于HTML5技术栈，支持使用Web技术如HTML、CSS和JavaScript来开发应用程序。Ionic 3是该...

1 条评论您还未登录，请先登录后发表或查看评论

angular中实现li或者某个元素点击变色

12-13

7042

先说一种最直接了当的不需要js控制，方法一：直接在用ng-class就可以控制： p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华p> p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑p> 在style里面设置如下： style type="text/css

ionic的header颜色设置

qq_28499043的博客

07-22

5485

这是我遇到的导航方面的一个问题，已经解决，希望对你有用

ionic3返回按钮样式改动

GXy10010的博客

08-19

5211

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传 LaTex数学公式 UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

ionic2 修改返回键颜色文字

兰色的fire

01-23

3893

在app.module.ts文件中修改返回键内容： imports: [ IonicModule.forRoot(MyApp,{ backButtonText: '', }), JsonpModule, ], 在variables.scss文件中修改返回键颜色 $toolbar-md-button-color :#fb6d07; $toolbar

ionic3双击返回退出应用的方法

10-16

在本篇文章中，我们将深入探讨如何在使用Ionic 3框架开发的应用中实现双击返回键退出应用的功能。Ionic是一个流行的开源框架，它允许开发者使用Web技术（如HTML、CSS和JavaScript）来构建跨平台的移动应用。Ionic 3...

ionic3监听并修改手机物理返回键和自带导航回退解决方案

04-27

在开发基于Ionic 3的应用程序时，特别是在处理移动设备时，正确管理用户的导航行为是非常重要的。这包括监听和处理手机的物理返回键事件，以及优化内置的导航回退功能。本文将详细介绍如何在Ionic 3中实现这些功能，...

ionic之样式button

牛栏山矿泉水

10-18

469

1、实例背景 ionic中常见的按钮button，设置按钮样式用class="button"，这个是设置普通样式 2、实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="i

ionic 中的navigation,tabbar及返回按钮定制

热门推荐

shenshucong520的专栏

08-21

1万+

ionic不得不说官网的文档，真是最好的学习资源，不过有些功能没测试出来，遗憾，官网地址：点此跳转要定制navigation和tabbar那就不得不提$ionicConfigProvider，去官网，官网上都有详细说明不想做个翻译工了，说下一般的功能，设置tabbar的位置，在底部还是在顶部，iOS默认底部，android默认顶部，在这里就可以修改了：，使用方法可分平台如： ionic

Ionic 3 从当前页面push到新页面，设置Back按钮为中文‘返回’

zhile7y的博客

05-09

1867

在Ionic 3开发中，经常会用到页面跳转，push方法自带的返回按钮文字为Back，如图：在中文APP下把Back改为返回的快速有效方法：打开src/app/app.module.ts文件，在 IonicModule.forToot(MyApp)中添加参数{backButtonText:'返回'}: IonicModule.forToot(MyApp，{backButtonText:'返回'})...

iOS 应用之间调用出现在左上角的返回按钮怎么自定义或者修改位置样式

yaoren8521的博客

12-29

2520

应用之间调用出现在左上角的返回按钮怎么自定义或者修改位置样式

ionic中循环出来的分类组点击改变背景颜色的实现

qq_27717857的博客

02-21

1919

1.html ng-class="{'selectColor':(isActiveId == item.id)}" ng-click="clickClassify(item.id)" style="margin-top: 5px">{{item.classify}} 2.js 默认

ionic3夜间模式

strong90的博客

01-23

601

原文地址：https://www.cnblogs.com/metaphors/p/7897209.html 目录创建主题样式导入 variables.scss创建 provider创建 page在 App 入口处应用主题效果图 1. 创建主题样式在 ./src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件，分别用于

ionic back 返回按钮不正常显示&&二级路由点击返回按钮失效无法返回到上一级页面的问题

小红红的博客

12-07

4929

用inoic写单页面应用，有一个默认的返回按钮，可是点击到二级界面返回按钮却不出现，或者出现之后点击back按钮没有反应，不返回到上一级页面，是因为在index.html 中定义按钮，二级页面和一级页面不是同一个中，不能共享历史记录，导致返回上一级界面失效。这样我们需要在HTML文件中写以下代码：但是，不要写里面的back button 返回按钮，要去每个需要返回按钮的htm

ionic4监听返回事件 AppMinimize navController

z15802933724的博客

09-21

6835

1：引入Platform、Nav、App、NavController import { Platform, ToastController, Nav, App, NavController, Tabs} from '@ionic/angular'; 2：安装AppMinimize $ ionic cordova plugin add cordova-plugin-appminimize $ np...