Node v6
Starting with v0.19 Astro must be used with Node v6+!
Menu

Header Bar Plugin

The header bar plugin allows you to add a customizable bar with left, center, and right icons and to wire up respective tap handlers.

Sample Usage

const headerBar = await HeaderBarPlugin.init()
const layout = await AnchoredLayoutPlugin.init()
headerBar.setRightIcon('file:///cart-icon.png', 'cart')
headerBar.on('click:cart', () => {
    console.log('Right icon clicked!')
})

layout.addTopView(headerBar)

Methods

HeaderBarPlugin.init() #

Creates and returns an instance of the header bar plugin that is used to make subsequent method calls.


setLeftIcon(url, id) #

Loads and sets the left icon. You can use the file:/// protocol to load local assets, e.g. file:///hamburger-icon.png.

Note: Only local assets are supported.


setLeftTitle(title, id) #

Sets the left area of the HeaderBar to the given title.


setLeftPlugin(plugin, id) #

Loads and sets the left icon as the content from a view plugin.


setCenterIcon(url, id) #

Loads and sets the center icon. You can use the file:/// protocol to load local assets, e.g. file:///logo.png.

Note: Only local assets are supported.


setCenterTitle(title, id) #

Sets the center area of the HeaderBar to the given title.

Note: On Android, the title is left-aligned in the center area of the HeaderBar to conform to Material Design.


setCenterPlugin(plugin, id) #

Loads and sets the center icon as the content from a view plugin.


setRightIcon(url, id) #

Loads and sets the right icon. You can use the file:/// protocol to load local assets, e.g. file:///cart-icon.png.

Note: Only local assets are supported.


setRightTitle(title, id) #

Sets the right area of the HeaderBar to the given title.


setRightPlugin(plugin, id) - #

Loads and sets the right icon as the content from a view plugin.


showLeftIcon() #

Sets the header bar's left icon to a visible state.


hideLeftIcon() #

Sets the header bar's left icon to an invisible state.


showCenterIcon() #

Sets the header bar's center icon to a visible state.


hideCenterIcon() #

Sets the header bar's center icon to an invisible state.


showRightIcon() #

Sets the header bar's right icon to a visible state.


hideRightIcon() #

Sets the header bar's right icon to an invisible state.


setTextColor(color) #

Sets the color of the text in the header bar such as the back button or title.


setBackgroundColor(color) #

Sets the background color.


showBottomBorder() #

Shows the bottom border. The border is different based on OS and version due to platform limitations and OS design guidelines.

For Android:

For iOS:


hideBottomBorder() #

Hides the bottom border.

On iOS, we cannot hide the bottom border nicely when the header bar is translucent. Calling this will result in setting translucency to false.


isShowingBottomBorder #

Return true if bottom border is showing, false otherwise. This is useful because on Android the bottom border is hidden by default, on iOS it is shown by default.


setOpaque() - (iOS only) #

Sets the header bar to be opaque.


setTranslucent() - (iOS only) #

Sets the header bar to be translucent.


showBackButtonText() - (iOS only) #

Show the text which appears beside the back icon.


hideBackButtonText() - (iOS only) #

Hide the text which appears beside the back icon.

Events

click:<id> #

Fired when an icon in the HeaderBar is tapped. The click event name is followed by a colon and the id of the clicked icon.

headerBar.on('click:cart', () => {
    drawer.showRightMenu()
})