heading

Overview

Displays text in a large format to serve as a heading (e.g. for a section of one of your app's screens).

Basic Example

<heading>Create New Work Order</heading>

You can use a XML String Formatting to make the text inside the heading dynamic:

<heading>Work Order: {work_order.reference_number}</heading>

Standard Attributes

value

Optional

Type: string

Default: unset

The text in the heading. This is an alternative to specifying the text directly inside the <heading>...</heading> tags.

Example: Without value

<heading>Heading text</heading>

Example: With value

<heading value="Heading text"/>

Advanced Attributes

align-text

Optional

Type: center | left | right

Default: left

Specify how the heading text should be aligned.

Example: heading with center-aligned text

<heading value="Heading text" sub-heading="This is my subheading" align-text="center"/>

color and divider-color

Optional

Type: string - can be a named color or #HEX value

Default: Primary font color

Specify the text color of the particular heading component.

<heading color="primary" divider-color="negative">Heading text</heading>

id

show-if and hide-if

sub-heading

Optional

Type: string

Default: unset

Specify sub-heading text that will display in a smaller font below the heading.

sub-heading-color

Optional

Type: string

Default: Primary font color

Specify the text color of the heading's sub-heading text.

Component Methods

The following component methods are available when an id is assigned to the component and component.heading({id:'my-id'}) is called from JS/TS:

scrollIntoView

Programmatically scroll until the heading is visible in the view.