本篇文章为大家展示了Ionic3中如何实现夜间模式功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
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(); }); } }
上述内容就是Ionic3中如何实现夜间模式功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/219812.html