IHeaderBar: { removeViewFromHeaderBar: any; addViewToHeaderBar: any; layout?: IFlexLayout<any>; alpha: number; transparent: boolean; borderVisibility: boolean; backgroundColor: IColor; itemColor: IColor; backgroundImage: IImage | string; leftItemEnabled: boolean; height: number; titleLayout?: IView<any>; title: string; titleColor: IColor; visible: boolean; setItems: any; setLeftItem: any; android: Partial<{ attributedTitle?: AttributedString; attributedSubtitle?: AttributedString; subtitleFont?: IFont; contentInset: { left: number; right: number }; logo?: IImage | null; logoEnabled?: boolean | null; subtitle?: string; subtitleColor?: IColor; elevation?: number; contentInsetStartWithNavigation?: number; padding?: { top?: number; left?: number; right?: number; bottom?: number } }>; ios: Partial<{ titleFont?: IFont; translucent: boolean; backBarButtonItem?: IHeaderBarItem; largeTitleDisplayMode?: LargeTitleDisplayMode; backIndicatorImage?: IImage; backIndicatorTransitionMaskImage?: IImage; prefersLargeTitles?: boolean; setVisible: any; leftItemEnabled: boolean }> }

Example

import Page from '@smartface/native/ui/page';
import Color from '@smartface/native/ui/color';
import HeaderBarItem from '@smartface/native/ui/headerbaritem';

var myPage = new Page({
onLoad: function() {
var page = this;
var headerBar = System.OS === "Android" ? page.headerBar : page.parentController.headerBar;
headerBar.backgroundColor = Color.MAGENTA;
page.headerBar.title = "Header Bar";

var myItem = new HeaderBarItem({
title: "Done",
onPress: function() {
console.log("You pressed Done item!");
}
});
this.headerBar.setItems([myItem]);
},
onShow: function() {
var page = this;
var headerBar = System.OS === "Android" ? page.headerBar : page.parentController.headerBar;
headerBar.visible = true;
}
});

Type declaration

  • removeViewFromHeaderBar:function
    • Parameters

      Returns void

  • addViewToHeaderBar:function
    • Parameters

      Returns void

  • Optional layout?: IFlexLayout<any>

    Gets/sets layout to header bar. It's mainly used to customize header bar content and recommended to not use with left/right item, titlelayout and title.

    Property

    Android

    Ios

    Since

    5.0.4

  • alpha: number

    Defines the opacity of a view. The value of this property is a float number between 0.0 and 1.0. For iOS, you should access this property from page.parentController. 0 represents view is completely transparent and 1 represents view is completely opaque.

    Property

    = 1]

    Android

    Ios

    Since

    4.0.0

  • transparent: boolean

    Gets/sets transparency of header bar. For iOS, you should access this property from page.parentController.

    Property

    = true]

    Ios

    Android

    Since

    4.0.0

  • borderVisibility: boolean

    Gets/sets border visibility of headerbar. For iOS, you should access this property from page.parentController.

    Property

    = true]

    Android

    Ios

    Since

    3.0.3

  • backgroundColor: IColor

    Gets/sets background color of the header bar. If not set, header bar will have default background color depending on device's OS and OS version. For iOS, you should access this property from page.parentController.

    Example

    import Page from '@smartface/native/ui/page';
    import Color from '@smartface/native/ui/color';
    var myPage = new Page({
    onLoad: function() {
    var page = this;
    var headerBar = System.OS === "Android" ? page.headerBar : page.parentController.headerBar;
    headerBar.backgroundColor = Color.RED;
    }
    });

    Property

    = Color.create("#00A1F1")]

    Android

    Ios

    Since

    0.1

  • itemColor: IColor

    Gets/sets item color of the header bar. This property will change color of the left item and color of all header bar items. For iOS, you should access this property from page.parentController.

    Example

    import Page from '@smartface/native/ui/page';
    import Color from '@smartface/native/ui/color';
    var myPage = new Page({
    onLoad: function() {
    var page = this;
    var headerBar = System.OS === "Android" ? page.headerBar : page.parentController.headerBar;
    headerBar.itemColor = Color.BLUE;
    }
    });

    Property

    = Color.WHITE]

    Android

    Ios

    Since

    0.1

  • backgroundImage: IImage | string

    Gets/sets background image of the HeaderBar. For iOS, you should access this property from page.parentController.

    Example

    import Page from '@smartface/native/ui/page';
    import Image from '@smartface/native/ui/image';
    var myPage = new Page({
    onLoad: function() {
    var page = this;
    var headerBar = System.OS === "Android" ? page.headerBar : page.parentController.headerBar;
    headerBar.backgroundImage = Image.createFromFile('images://smartface.png');
    }
    });

    Property

    = null]

    Android

    Ios

    Since

    0.1

  • leftItemEnabled: boolean

    Gets/sets the navigation indicator visibility of the headerBar. If false navigation indicator will not show, otherwise will show as back icon if left item not set.

    Property

    = false]

    Android

    Ios

    Since

    0.1

  • Readonly height: number

    Gets the height of the header bar. Height is a read only property and its value may change depending on device and screen density. For iOS, you should access this property from page.parentController.

    Property

    Android

    Ios

    Since

    0.1

  • Optional titleLayout?: IView<any>

    Gets/sets the title layout of the HeaderBar. Title layout allows you to assign custom view. For iOS, layouts are centered on the header bar and may be resized to fit.

    Property

    Android

    Ios

    Since

    3.2.1

  • title: string

    Gets/sets title of the header bar.

    Property

    Android

    Ios

    Since

    0.1

  • titleColor: IColor

    Gets/sets title color of the header bar. For iOS, you should access this property from page.parentController.

    Property

    = Color.BLACK]

    Android

    Ios

    Since

    0.1

  • visible: boolean

    Gets/sets visibility of the header bar. For iOS, you should access this property from page.parentController.

    Property

    = true]

    Android

    Ios

    Since

    0.1

  • setItems:function
    • This function allows you to set header bar items to the right of page's headerBar. Given items should be instance of UI.HeaderBarItem class. Items will be added to header bar in given array order starting from right of header bar.

      Method

      setItems

      Since

      0.1

      Parameters

      Returns void

  • setLeftItem:function
    • Sets left item of header bar to given item.

      Example

      import Page from '@smartface/native/ui/page';
      import HeaderBarItem from '@smartface/native/ui/headerbaritem';
      var myPage = new Page();
      myPage.onLoad = function(e){
      var leftItem = new HeaderBarItem();
      leftItem.title = "Left Item";
      myPage.headerBar.setLeftItem(leftItem);
      }

      Method

      setLeftItem

      Parameters

      Returns void

  • android: Partial<{ attributedTitle?: AttributedString; attributedSubtitle?: AttributedString; subtitleFont?: IFont; contentInset: { left: number; right: number }; logo?: IImage | null; logoEnabled?: boolean | null; subtitle?: string; subtitleColor?: IColor; elevation?: number; contentInsetStartWithNavigation?: number; padding?: { top?: number; left?: number; right?: number; bottom?: number } }>
  • ios: Partial<{ titleFont?: IFont; translucent: boolean; backBarButtonItem?: IHeaderBarItem; largeTitleDisplayMode?: LargeTitleDisplayMode; backIndicatorImage?: IImage; backIndicatorTransitionMaskImage?: IImage; prefersLargeTitles?: boolean; setVisible: any; leftItemEnabled: boolean }>

Generated using TypeDoc