MHeading

The MobileHeading widgets are different delivery modes of the same widget that enables the creation of stylish title headings.


  • UI Type:

Extends: BaseWidget ColoredWidget

Properties

Name Desciption
Back LabelSet the text that should be displayed as a navigation button to go back.
ColorSet the color of the heading bar.
DisabledThe widget cannot be used.
HiddenHides the widget from the user.
LabelText label shown on the widget.
Left IconIn Mobile Header, on the left side, icon is displayed, which can be linked to any other view or open a menu.
LinkSet whether clicking the left icon should navigate somewhere in the ui.
Right IconSet an icon that should be displayed in the right end of the heading.
Right LinkSet whether clicking the right icon should navigate somewhere in the ui.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
TransitionSet the transition that should be used for the heading.

Style

Name Desciption
Background-colorChange background color of the widget.
Border bottom widthEnable bottom border.
Border colorAdd the color for the border.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Font SizeSet the font size in pixels for text.
Icon colorThe color of the icon.
Text-alignmentSet left, centered or right. Applies both to icon and text.

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus.
Click Event that triggers based on touch or click.
event The event that triggered the handler.
DblClick Event that triggers based on double click.
event The event that triggered the handler.
Focus Event when indicating/ highlighting widget using the cursor.
LeftIconClick Triggered when the left icon is clicked on the element.
LeftIconClick In Mobile Header, on the left side, icon is displayed, which can be linked to any other view or open a menu.
RightIconClick Triggered when the right icon is clicked on the element.
RightIconClink Set whether clicking the right icon should navigate somewhere in the ui.

Function

addRightIcon ( iconClass: String , onClick: Function )

Adds an icon to the far right side of the header.

Parameters
Name Type Description
iconClass String The classname of the icon to use (see Ionicons).
onClick Function Callback function for when the icon is clicked.

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) →{ Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) →{ ID }

Returns the ID of the widget.

Returns

The ID of the widget

getLabel ( ) →{ String }

Returns the label shown on the header.

Returns

The shown label.

getRightIcon ( )

Returns the far right side icon.

getValue ( ) →{ Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) →{ Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) →{ Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setLabel ( label: String )

Sets the label shown on the header.

Parameters
Name Type Description
label String The new label.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.

Other Widgets