Ionic3學習筆記(十)實現夜間模式功能
阿新 • • 發佈:2017-11-26
gpa 效果 app code fff eat ext images provider
2. 導入
本文為原創文章,轉載請標明出處
目錄
- 創建主題樣式
- 導入
variables.scss
- 創建 provider
- 創建 page
- 在 App 入口處應用主題
- 效果圖
1. 創建主題樣式
在 ./src/theme
文件夾下創建 theme.light.scss
、theme.dark.scss
2個文件,分別用於日間模式、夜間模式的設置。
theme.light.scss
:
.light-theme { ion-content { background-color: #f4f4f4; } .item { background-color: #fff; } ion-textarea { background-color: #fff; } .toolbar-background { background-color: #f8f8f8; } .tab-button { background-color: #f8f8f8; } }
theme.dark.scss
:
.dark-theme {
ion-content {
background-color: #555;
}
.item {
background-color: #555;
}
ion-textarea {
background-color: #666;
}
.toolbar-background {
background-color: #444;
}
.tab-button {
background-color: #444;
}
}
這是我的2個主題樣式,讀者可以自己按需進行編寫。
2. 導入 variables.scss
@import "theme.light";
@import "theme.dark";
3. 創建 provider
終端運行:
ionic g provider setting-data
setting-data.ts
:
import {Injectable} from ‘@angular/core‘; import {BehaviorSubject} from "rxjs/BehaviorSubject"; @Injectable() export class SettingDataProvider { // true: dark-theme // false: light-theme theme: BehaviorSubject<boolean>; constructor() { this.theme = new BehaviorSubject(false); } setActiveTheme(theme) { this.theme.next(theme); } getActiveTheme() { return this.theme.asObservable(); } }
4. 創建 page
終端運行:
ionic g page setting
setting.html
<ion-header>
<ion-navbar>
<ion-title>設置</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>個性化設置</ion-list-header>
<ion-item>
<ion-label>夜間模式</ion-label>
<ion-toggle checked="{{theme}}" (ionChange)="toggleTheme()"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
setting.ts
import {Component} from ‘@angular/core‘;
import {IonicPage, NavController, NavParams, ToastController} from ‘ionic-angular‘;
import {SettingDataProvider} from "../../providers/setting-data/setting-data";
@IonicPage()
@Component({
selector: ‘page-setting‘,
templateUrl: ‘setting.html‘,
})
export class SettingPage {
theme: boolean;
constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public settingDataProvider: SettingDataProvider) {
this.getActiveTheme();
}
getActiveTheme() {
this.settingDataProvider.getActiveTheme().subscribe(theme => {
this.theme = theme;
});
}
toggleTheme() {
if (!this.theme) {
this.presentToast(‘關閉應用後夜間模式將失效‘);
}
this.settingDataProvider.setActiveTheme(!this.theme);
}
presentToast(message: string) {
let toast = this.toastCtrl.create({message: message, duration: 2000});
toast.present().then(value => {
return value;
});
}
}
5. 在 App 入口處應用主題
app.html
<ion-nav [root]="rootPage" [class]="theme"></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 {SettingDataProvider} from "../providers/setting-data/setting-data";
@Component({
templateUrl: ‘app.html‘
})
export class MyApp {
rootPage: any = ‘TabsPage‘;
theme: string;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, settingDataProvider: SettingDataProvider) {
settingDataProvider.getActiveTheme().subscribe(theme => {
if (theme) {
this.theme = ‘dark-theme‘;
} else {
this.theme = ‘light-theme‘;
}
});
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
6. 效果
如有不當之處,請予指正,謝謝~
Ionic3學習筆記(十)實現夜間模式功能