<text>
The <text> element is a basic building block to show text content in the UI layout. Text elements can by styled typographically with style rules.
Some examples of styles applied to text (including nested text):
<screen>
<styles>
<style
fontFamily="HKGrotesk-Regular"
fontSize="16"
id="Description"
margin="24"
marginBottom="0"
/>
<style fontFamily="HKGrotesk-Medium" fontSize="24" id="Basic" margin="24" />
<style fontFamily="HKGrotesk-Bold" fontSize="16" id="Bold" margin="24" />
<style
backgroundColor="#63CB76"
color="white"
fontFamily="HKGrotesk-Bold"
fontSize="32"
id="Color"
margin="24"
padding="16"
/>
</styles>
<body scroll="true">
<text style="Basic">Hello, world!</text>
<text style="Basic">Hello,
<text style="Bold">World of
<text style="Color">HyperView!</text>
</text>
</text>
</body>
</screen>
Structure
A <view> element can only appear anywhere within a <screen> element.
Attributes
- Behavior attributes
stylenumberOfLinesidhidedisabledselectableadjustsFontSizeToFitallowFontScalingmaxFontSizeMultiplierminimumFontScalepreformatted
Behavior attributes
A <view> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).
style
A space-separated list of styles to apply to the element. See Styles. Note that text style rules will cannot be applied to a <view>.
numberOfLines
| Type | Required |
|---|---|
| integer | No |
An integer representing the number of lines of text to display before the text content truncates. The width of the element is determined by the applied styles and the dimensions of the device screen.
id
| Type | Required |
|---|---|
| string | No |
A global attribute uniquely identifying the element in the whole document.
hide
| Type | Required |
|---|---|
| false (default), true | No |
If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.
disabled
| Type | Required |
|---|---|
| false (default), true | No |
If disabled="true", press behaviors on the element will not respond to user interaction. The element's native disabled state is exposed to UI automation frameworks.
selectable
| Type | Required |
|---|---|
| boolean | No |
A boolean that allows users to select the content of <text> element.
adjustsFontSizeToFit
| Type | Required |
|---|---|
| boolean | No |
If adjustsFontSizeToFit="true", fonts will be scaled down automatically to fit given style constraints.
allowFontScaling
| Type | Required |
|---|---|
| boolean | No |
Specifies whether fonts should scale to respect Text Size accessibility setting
maxFontSizeMultiplier
| Type | Required |
|---|---|
| number | No |
Specifies whether fonts should scale to respect Text Size accessibility setting
minimumFontScale (iOS)
| Type | Required |
|---|---|
| number | No |
Specifies the smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
preformatted
By default, <text> element stips out extraneous whitespaces and line breaks. This attribute prevents this behavior, so that all spaces and line-breaks are rendered.