Label

<Label> is a UI component that displays read-only text.

This <Label> is not the same as the HTML <label>.

Examples

Example: Simple label

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

<label text="Label" />
<actionBar title="ActionBar Title" />
<Label text="Label" />
<label text="Label"></label>
<label>Label</label>

Example: Styling the label

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

<label textWrap="true">
  <FormattedString>
    <span text="This text has a " />
    <span text="red " style="color: red" />
    <span text="piece of text. " />
    <span text="Also, this bit is italic, " fontStyle="italic" />
    <span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</label>
<label textWrap="{true}">
  <formattedString>
    <span text="This text has a " />
    <span text="red " style="color: red" />
    <span text="piece of text. " />
    <span text="Also, this bit is italic, " fontStyle="italic" />
    <span text="and this bit is bold." fontWeight="bold" />
  </formattedString>
</label>
<Label textWrap="true">
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Label>
<label textWrap="true">
  <FormattedString>
    <span text="This text has a "></span>
    <span text="red " style="color: red"></span>
    <span text="piece of text. "></span>
    <span text="Also, this bit is italic, " fontStyle="italic"></span>
    <span text="and this bit is bold." fontWeight="bold"></span>
  </FormattedString>
</label>
import { Color } from '@nativescript/core'
;<label textWrap={true}>
  <formattedString>
    <span>This text has a </span>
    <span color={new Color('red')}>red </span>
    <span>piece of text. </span>
    <span fontStyle="italic">Also, this bit is italic, </span>
    <span fontWeight="bold">and this bit is bold.</span>
  </formattedString>
</label>

Props

Name Type Description

letterSpacing

number

Gets or sets letterSpace style property.

lineHeight

number

Gets or sets lineHeight style property.

text

string

Gets or sets the Label text.

textAlignment

initial, left, center, right, justify

Gets or sets text-alignment style property.

textDecoration

none, underline, line-through, underline, line-through

Gets or sets text decoration style property.

textTransform

initial, none, capitalize, uppercase, lowercase

Gets or sets text transform style property.

textWrap

boolean

Gets or sets whether the Label wraps text or not.

whiteSpace

initial, normal, nowrap

Gets or sets the whitespace style.

...Inherited

Inherited

Additional inherited properties not shown. Refer to the API Reference

Events

Name Description

textChange

Emitted when the label text is changed.

Native component

Android iOS

android.widget.TextView

UILabel