In the Steroids Runtime you can have multiple native-wrapped webviews executing at the same time, each displaying its own HTML document. A steroids.views.WebView is an object that represents a single webview. These webviews can be grouped and controlled with Steroids's native navigation controllers. There are three ways to use a
- As a modal window via
- As a navigation stack layer via
- As a drawer via
Furthermore, your app has a root WebView configured via the
steroids.config.location property in the file
config/application.coffee. If you have tabs enabled, each tab has its own root WebView, defined by the
steroids.config.tabBar.tabs array. The root WebView can never be popped with steroids.layers.pop. See the config/application.coffee Guide for more information.
The current view (steroids.view) can have a navigation bar set at its top. This reduces the vertical space reserved for the view.
The left side of the navigation bar is reserved for the native back button which allows the user to navigate through the
steroids.layers native navigation stack.
The back button title will be "Back" by default, or the navigation bar title configured in the preceding
On iOS, the navigation bar appears automatically with steroids.layers.push, but can be set so that it doesn't appear with an option. On Android, steroids.layers.push doesn't show the navigation bar by default.
The navigation bar includes:
- The back button on the left side, visible only if at least one layer is pushed to
- An optional title.
- Optional steroids.buttons.NavigationBarButtons on the right and the left side. (Only one right side button is supported on Android).
- steroids.view.navigationBar.show - Show the navigation bar.
- steroids.view.navigationBar.hide - Hide the navigation bar.
- steroids.view.navigationBar.update - Update the navigation bar content.
- steroids.view.navigationBar.addStyleClass - Add a CSS style class to the navigation bar.
- steroids.view.navigationBar.setStyleClass - Set the CSS style class of the navigation bar.
- steroids.view.navigationBar.setStyleId - Set the CSS style id of the navigation bar.
- steroids.view.navigationBar.setStyleCSS - Set custom CSS for the navigation bar.
- steroids.view.navigationBar.tapButton - Trigger a button tap on a navigation bar button.
In favor of Pixate's native CSS, we do not recommend the use of
steroids.view.navigationBar.setAppearance anymore, as it clashes badly with the native styles.
- steroids.buttons.NavigationBarButton - Represents a navigation bar button.
A namespace for methods and properties related to the Intial View of the app.
The Intial View is a special WebView that is shown before the rest of the app is loaded. It can be effectively used for e.g. session management. The Initial View needs to be defined in
config/application.coffee – read more in the Initial View guide.
Represents the current navigation stack and provides methods to present views in a hierarchical fashion.
To find out what the state of the application is regarding views, modals and drawers, the method
getApplicationState may be used.