Since both blacktranslucent and default display black text and both blackopaque and lightcontent display white text you may question when to use which or wonder what the difference is, the names make this a little more confusing still. It can be a little confusing to set this preference based on just looking at the available values compared to the results. This setting is applied without regard to the status bar background color so if you accidentally pick the same color for both, you will not see any status bar, just a 20px white or black bar at the top of your application.Īlso, the StatusBarStyle preference for text color is applied regardless of the StatusBarOverlaysWebView value since it just sets the text/foreground color and can be set on a transparent status bar. The lightcontent and blackopaque values display white foreground text and icons. The default and blacktranslucent values display black foreground text and icons.
In other words, background color can only be set if it’s iOS6 style and not the iOS7 transparent overlay, but that setting is true initially so you’d have to change it to false yourself if you want to set a specific color. However, this preference is only used when the StatusBarOverlaysWebView is false. It may be confusing if you tried to run the application now with the status bar plugin and preferences added as above because you might expect to see a black background based on the preference set for StatusBarBackgroundColor to #000000. StatusBarStyle sets the foreground color, including the text and icons Explanation StatusBarBackgroundColor sets the background color of the bar but ONLY when StatusBarOverlaysWebView is false (You don’t need to copy the element lines for the plugin itself, just these preferences). To change the configuration preferences, be sure to first copy them into your root project config.xml (ie: myProj/config.xml) and tweak them there since the platform config files get rebuilt each time you build/run with the CLI and you will lose any changes made there. By just adding the plugin and doing nothing more however, you are already customizing it with the above preferences since they are added automatically, so you need to be aware of this. If you didn’t add the plugin at all or customize anything on your status bar, the default foreground/text color is black and the default background color will be the color of your application’s background for iOS7 since it’s transparent.
#IONIC IOS 11 STATUS BAR WHITE BACKGROUND INSTALL#
To use the Status Bar plugin, first install it in the usual manner: This plugin is also used to alter the appearance of the status bar (color/style) from the native side so you can customize your applications to fit your specific needs. There’s also a native solution available via the Cordova Status Bar plugin.
They use the Cordova Device plugin (installed automatically when you create a new ionic project with the CLI) to detect the platform details and will apply different CSS classes to the navigation bars and other UI objects to handle things based on platform and OS versions.
Some UI frameworks like Ionic actually do this for you.
One common solution on the web side is to offset the application content by 20 pixels from the top to account for the status bar when the platform is detected as iOS7 using the Cordova Device Plugin. There are different ways to handle this iOS7 change in your applications. You can see how the status bar now appears to blend in with the header content in the image below from the Apple docs showing iOS7 vs iOS6:
#IONIC IOS 11 STATUS BAR WHITE BACKGROUND FULL#
This is due to the iOS7 change for ViewControllers (containing the WebView running your PhoneGap application) to display full screen by default with a transparent Status Bar overlaying it rather than having its own designated space in the top 20 pixels of the screen as before. If you’re building PhoneGap/Cordova applications for iOS, you’ve likely run into the iOS7 issue where the status bar overlaps the content in the top portion of your application where a navigation bar would typically display.
0 kommentar(er)
