info

Overview

Displays text in an app in a paragraph form. The text can be displayed in a single line, or optionally with a label.

Basic Example

The simplest way to use an info component is to specify the text to display between the <info> tags.

main.view.xml

<info>This is the simplest way to use an info component.</info>

Standard Attributes

label

label

value

Optional

Type: string

Default: unset

Specify the text to display inside the info component. This is an alternative to specifying the text directly inside the <info>...</info> tags.

Example: Without value

<info>Info text</info>

Example: With value

<info value="Info text"/>

Advanced Attributes

align-text

Optional

Type: center | left | right

Default: left

Specify if the text content of the info component.

Example: info right-aligned text

<info label="Condition: Faulty" align-text="right">
    The condition of the part has been assessed and it was found to be faulty.
</info>

align-label

Optional

Type: center | left | right

Default: left

Specify how the label should be aligned.

bind

bind

id

id

label-case

Version compatibility

label-case was introduced in version 4.86.5 of the JourneyApps Runtime.

label-case

label-color

label-color

show-if and hide-if

show-if

hide-if

text-color

Optional

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

Default: Primary font color

Specify the text color of the info's text.

Component Methods

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

scrollIntoView

Programmatically scroll until the info component is visible in the view.