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.
<info>This is the simplest way to use an info component.</info>

Standard Attributes
label
labellabel
value
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
value
<info>Info text</info>
Example: With value
value
<info value="Info text"/>
Advanced Attributes
align-text
align-text
Optional
Type: center
| left
| right
Default: left
Specify if the text content of the info
component.
Example: info
right-aligned text
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
align-label
Optional
Type: center
| left
| right
Default: left
Specify how the label
should be aligned.
bind
bindbind
id
idid
label-case
label-caselabel-case
label-color
label-colorlabel-color
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
text-color
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
scrollIntoView
Programmatically scroll until the info
component is visible in the view.
Last updated