Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Bolding, Italicizing, and Underlining Portions of Text in NativeScript

DZone's Guide to

Bolding, Italicizing, and Underlining Portions of Text in NativeScript

Learn some of the features of the powerful, and easy to use, NativeScript API, by making text markup in a NativeScript app.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

This article is a series of quick tips for anyone that has ever wanted to bold, italicize, underline, or highlight a portion of text in a NativeScript app. For example, suppose you had the following code in your app:

<StackLayout class="p-20">
  <Label textWrap="true"
    text="NativeScript is an AMAZING framework!"></Label>
</StackLayout>


This code works and displays the label as such:

initial-label


Although this code works, let’s be honest—a sentence without formatting can’t convey how amazing NativeScript really is. If you switch to use the code below you can make AMAZING really stand out in bold.

<StackLayout class="p-20">
  <Label textWrap="true">
    <Label.formattedText>
      <FormattedString>
        <FormattedString.spans>
          <Span text="NativeScript is an " />
          <Span text="AMAZING" fontAttributes="Bold" />
          <Span text=" framework." />
        </FormattedString.spans>
      </FormattedString>
    </Label.formattedText>
  </Label>
</StackLayout>

NOTE: If you’re using Angular with NativeScript the syntax you’ll need is slightly different—more on that in a moment.

The label now renders like this:

bold-label

This code leverages NativeScript’s FormattedString class, which is a handy little utility for altering portions of text in NativeScript apps. Notice how the code breaks the string into three parts or spans.

<Span text="NativeScript is an " />
<Span text="AMAZING" fontAttributes="Bold" />
<Span text=" framework." />


Each of these Span components can use a number of attributes, such as backgroundColor, fontFamily, fontSize, foregroundColor, strikethrough, and underline. We’ll look at a few examples of this in a moment, but first, there’s one caveat we must discuss.

Angular Usage

If you try to copy and paste the above example into a NativeScript and Angular app your life will be full of syntax errors.

But no worries! NativeScript has a special built-in directive to make the use of the same FormattedString class possible, and actually a lot easier. The following code snippet runs just fine in a NativeScript and Angular app.

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" fontAttributes="Bold"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>


And this code renders exactly the same as the previous example.

bold-label

The syntax is so much nicer that I’m going to use it for the rest of this article because no one needs more <Label.formattedText> and </FormattedString.spans> in their lives. If you are using NativeScript without Angular, just know that you’ll need to wrap this article’s subsequent examples with the markup from the first example.

With that out of the way, let’s do some practical and ridiculous things with <FormattedString>.

Fun With FormattedString

For the rest of this article, I’m going to show a few code snippets and how they render. You can always look up these APIs yourself in the FormattedString API docs.

Italics

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" fontAttributes="Italic"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>


italic-label

Underlining

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" underline="true"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>


underline-label

Colors

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an AMAZING framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>


color-label

Crazy

<StackLayout class="page m-20">
  <Label textWrap="true">
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>


crazy-label

Other UI Components

Oh yeah, one more thing before you return to the rest of the internet—you can totally use the FormattedString with other NativeScript UI components.

In fact, I can change the previous “Crazy” example from a <Label> to a <Button>, and everything just works.

<StackLayout class="page m-20">
  <Button>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Button>
</StackLayout>


The button looks like this on iOS:

crazy-button

And like this on Android:

crazy-button-android

It’s actually pretty crazy what you can use these APIs to do. Believe it or not, this works.

<StackLayout class="page m-20">
  <TextField>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </TextField>
</StackLayout>


crazy-textfield-ios

crazy-textfield-android

Fun, huh? Hopefully, I’ve shown you that NativeScript’s FormattedString class is a powerful way to format any text in your NativeScript apps.

Have you used FormattedString to do something cool in your apps? Tell us about it in the comments.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web dev ,nativescript ,api

Published at DZone with permission of Tj VanToll. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}