Formatted String
NativeScript has a special class called
FormattedString
to support various text
transformations and decorations. The
FormattedString
class can be used with all
text-related components like Label
,
TextView
, TextField
and even
Button
.
Usage
NativeScript has a special class called
FormattedString
to support various text
transformations and decorations. The
FormattedString
class can be used with all
text-related components like Label, TextView, TextField and even
Button.
Label with formatted string
<Label>
<FormattedString>
<Span text="Words " color="#006600">
</Span>
<Span text="with " color="#990000" fontWeight="Bold">
</Span>
<Span text="different " color="#ffcc00">
</Span>
<Span text="color.">
</Span>
</FormattedString>
</Label>
TextField with formatted string
<TextField>
<FormattedString>
<Span text="Formatted " fontSize="16">
</Span>
<Span text="String " fontSize="18">
</Span>
<Span text="TextField" fontSize="22">
</Span>
</FormattedString>
</TextField>
TextView with formatted string
Button with formatted string
Tips And Tricks
Creating Button via Code-Behind
FormattedString
s could also be defined via
code-behind.
Label with formatted string
const label = new Label();
const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";
const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);
label.formattedText = formattedStringLabel;
const label = new Label();
const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";
const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);
label.formattedText = formattedStringLabel;
TextField with formatted string
const textField = new TextField();
const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();
firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";
formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);
textField.formattedText = formattedStringTextField;
const textField = new TextField();
const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();
firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";
formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);
textField.formattedText = formattedStringTextField;
TextView with formatted string
Button with formatted string
Properties
Name | Type | Description |
---|---|---|
spans |
ObservableArray<Span> |
An observable collection of Span objects used to define common text properties. |
API References
Name | Type | API Reference Link |
---|---|---|
tns-core-modules/text/formatted-string | Module |
|
Span | Module |
|
ViewBase | Class |