Links

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

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

id

label-case

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

label-color

show-if and 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.
Last modified 6mo ago