狀態列
Framework7 附帶狀態列元件(cordova-plugin-statusbar 的包裝器),可協助自訂應用程式的狀態列及其行為。
此功能僅在應用程式於安裝 cordova-plugin-statusbar 的 cordova/capacitor 環境下執行時才可用
狀態列應用程式參數
透過在 statusbar
屬性下傳遞與狀態列相關的參數,可以在應用程式初始化時控制一些預設的狀態列行為
var app = new Framework7({
statusbar: {
iosOverlaysWebView: true,
},
});
現在讓我們來看看所有可用的參數清單
參數 | 類型 | 預設值 | 說明 |
---|---|---|---|
enabled | 布林值 | true | 啟用 Framework7 處理狀態列。如果您不希望 Framework7 處理狀態列行為,請將其停用 |
iosBackgroundColor | 字串 | 應用程式於 iOS 裝置上執行時的背景色彩十六進位字串(#RRGGBB )。如果傳遞,則會覆寫 CSS 值 | |
androidBackgroundColor | 字串 | 十六進位字串(#RRGGBB )應用程式於 Android 裝置上執行時的背景色彩。如果傳遞,則會覆寫 CSS 值 | |
scrollTopOnClick | 布林值 | true | 如果啟用,則按一下狀態列覆蓋層會將頂端頁面內容捲動到頂端。 |
iosOverlaysWebView | 布林值 | true | 當應用程式於 iOS 裝置上執行時,讓狀態列覆蓋層覆蓋或不覆蓋 WebView。 |
androidOverlaysWebView | 布林值 | true | 當應用程式於 Android 裝置上執行時,讓狀態列覆蓋層覆蓋或不覆蓋 WebView。 |
iosTextColor | 字串 | 黑色 | 應用程式於 iOS 裝置上執行時的狀態列文字色彩。可以是 |
androidTextColor | 字串 | 黑色 | 應用程式於 Android 裝置上執行時的狀態列文字色彩。可以是 |
狀態列應用程式方法
在應用程式初始化後,我們可以使用與狀態列相關的應用程式方法來控制狀態列
app.statusbar.hide() | 隱藏狀態列 |
app.statusbar.show() | 顯示狀態列 |
app.statusbar.overlaysWebView(overlays) | 設定狀態列是否覆蓋 WebView
|
app.statusbar.setTextColor(color) | 設定/變更狀態列文字顏色。
|
app.statusbar.setBackgroundColor(hex) | 設定/變更狀態列背景顏色
|
app.statusbar.isVisible() | 如果系統狀態列可見,傳回 true ;如果不可見,傳回 false |