Skip to content

label.md

Latest commit

 

History

History
157 lines (104 loc) · 3.6 KB

label.md

File metadata and controls

157 lines (104 loc) · 3.6 KB
title Label
description UI component for displaying text.
contributors
rigor789
Ombuweb

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

::: warning Note The NativeScript <Label> is not the same as the HTML <Label>. :::

<<< @/../examples/typescript/src/ui/Label/template.xml#example

<<< @/../examples/angular/src/ui/Label/component.html#example <<< @/../examples/react/src/components/ui/label.tsx#example <<< @/../examples/solid/src/ui/label.tsx#example <<< @/../examples/svelte/app/components/ui/Label.svelte#example <<< @/../examples/vue/src/ui/Label/component.vue#example

Examples

Styling the label

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

<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>

Props

letterSpacing

letterSpacing: number

Gets or sets the letter spacing.

See MDN: CSS letter-spacing.

lineHeight

lineHeight: number

Gets or sets the line height.

See MDN: CSS line-height.

text

text: string

Gets or sets the text shown.

textAlignment

textAlignment: 'initial' | 'left' | 'center' | 'right' = 'left'

Gets or sets the text alignment style property.

Defaults to left.

textDecoration

textDecoration: TextDecorationType // "none" | "underline" | "line-through" | "underline line-through"

Gets or sets the text decoration style.

See TextDecorationType.

Defaults to none.

textTransform

textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"

Gets or sets the text transform.

See TextTransformType.

Defaults to initial.

textWrap

textWrap: boolean

Gets or sets whether the label should wrap longer text to new lines.

Default value is false.

whiteSpace

whiteSpace: WhiteSpaceType // "initial" | "normal" | "nowrap"

Gets or sets white-space handling.

See WhiteSpaceType and MDN: CSS white-space.

Defaults to initial.

...Inherited

For additional inherited properties, refer to the API Reference.

Native component