What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

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).
heading was visually updated in version 4.73.0 of the JourneyApps Runtime.

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.
Previous
display-signature
Next
html
Last modified 9mo ago