ionic2入门教程(九)样式修改和主题切换
Ionic 样式修改和主题切换
系列教程看这里
Ionic2入门教程(一)安装和环境配置
Ionic2入门教程(二)进阶配置:Android打包
ionic2入门教程(三)高仿网易公开课(1)
ionic2入门教程(四)解读目录结构
ionic2入门教程(五)如何使用IonicPage
ionic2入门教程(六)地图服务(谷歌、高德、百度定位)
ionic2入门教程(七)来一个五星评分
ionic2入门教程(八)高仿网易公开课(2)觉得才开始接触一个新框架时肯定有些迷茫,比如说样式我要怎么改,为什么我每新建你个组件都会有一个scss,然后还有app.scss,theme下面还有个variable.scss,应该加在哪里呢?
默认的样式怎么覆盖呢?我们可以去官网找对应的默认变量然后覆盖:
比如页面背景颜色:$background-color:#f5f5f5;
但是比如说header的颜色就很难改,因为没有暴露默认变量,所以我们可以找到对应的css的class,
比如:.toolbar-background { background-color: #212121 !important; }
然后主题切换呢,是比较好玩的一个功能,通过实现这样一个功能呢,你也会掌握大部分样式修改的方法~
1、样式修改
1.每个页面自己的scss
在组件中使用局部样式,以利于维护
2.app/app.scss
这里是你的全局样式。那些会影响你整个应用的样式集中存放在这里。
3.theme/variables.scss
2、主题切换
0.切换效果
1.在theme下新建两个scss文件
theme.light.scss theme.dark.scss
2.内容
theme.light.scss
.light-theme { ion-content { background-color: #fff; } .toolbar-background { background-color: #fff; } $tabs-md-tab-text-color: grey; $tabs-md-tab-text-color-active : #32db64; $tabs-md-tab-icon-color : grey; $tabs-md-tab-icon-color-active : #32db64; //bgcolor $list-border-color:grey; $list-background-color:white; $tabs-background:white; $background-color:#f5f5f5; }
theme.dark.scss
.dark-theme { ion-content { background-color: #090f2f; color: #fff; } .header .toolbar-background { background-color: #090f2f; } .grid, .sift-title { background-color: #090f2f; } //bgcolor .tab-button { background-color: #090f2f; } $tabs-background:#090f2f; $background-color:grey; }
3.在variables.scss导入
@import "theme.light"; @import "theme.dark";
4.创建一个setting服务
ionic g provider settings
为了确保我们的应用程序始终是最新选择的主题,我们使用一种称为BehaviourSubject的类型,它继承自Subject,然后从Observable继承,因此它或多或少是一种特殊类型的Observable。
所以在我们的构造函数中,我们设置一个初始值,当我们想要将它设置为一个新值时,我们用到next()方法,最后我们将它作为一个Observable返回到我们的视图,因为我们不需要更多的特殊功能 只需使用它像一个标准的Observable。
setting.ts
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { BehaviorSubject } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; /* Generated class for the SettingProvider provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular DI. */ @Injectable() export class SettingProvider { private theme: BehaviorSubject<String>; constructor() { // theme 是 BehaviorSubject实例 this.theme = new BehaviorSubject('light-theme'); } setActiveTheme(val) { // 改变值 this.theme.next(val); } getActiveTheme() { // 观察 return this.theme.asObservable(); } }
5.切换按钮
home.html
<button ion-button full icon-left (click)="changeTheme()"> <ion-icon name="heart" color="danger"></ion-icon> </button>
home.ts
import { SettingProvider } from './../../providers/setting/setting'; import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html', }) export class HomePage { selectedTheme: String; constructor( public navCtrl: NavController, public navParams: NavParams, private settings: SettingProvider) { // 获取当前主题 this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val); } onSlideChanged() { const currentIndex = this.slider.getActiveIndex(); // console.log(currentIndex); } changeTheme() { if (this.selectedTheme === 'dark-theme') { //改变 this.settings.setActiveTheme('light-theme'); } else { this.settings.setActiveTheme('dark-theme'); } } }
5.在入口的app组件应用主题
app.html
<!-- 动态添加class --> <ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
app.component.ts
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { SettingProvider } from './../providers/setting/setting'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = "TabsPage"; selectedTheme: String; constructor( platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private settings: SettingProvider) { this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val); platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } }
3、常用css类
//header字体颜色 .toolbar-title,.bar-button{ color:white; } //header背景颜色 .toolbar-background { background-color: #212121 !important; }
4、常用sass变量
//tabs $tabs-md-tab-text-color: grey; $tabs-md-tab-text-color-active : #32db64; $tabs-md-tab-icon-color : grey; $tabs-md-tab-icon-color-active : #32db64; //bgcolor $list-border-color:grey; $list-background-color:white; $tabs-background:white; $background-color:#f5f5f5;
5、参考
Observable详解
dynamic-theming-ionic
6、源码
相关推荐
templateUrl:'build/app.html',<ion-navid="nav"[root]="rootPage"#contentswipe-back-enabled="false"