Nativescript Core > TabStripItem auto-formatting text (Android)

Question

Re-posted here from here

I'm working with Tabs / TabStrip / TabStripItem and I'm running into a problem (this is only tested on Android).

I'm creating a Label using a FormattedString and Span tags. Each Span tag has its own style (its own fontSize / fontWeight).

When I attach this Label to the TabStripItem 'label' property, it removes the Span's style and resets it all to default.

Here's my code:

const createTabLabel = (name, description) =>
{
    const tabTitle = new Label();

    const title = new Span();
    title.text = name + '\n';
    title.fontSize = 24;

    const subTitle = new Span();
    subTitle.text = description;
    subTitle.fontSize = 8;

    const formattedStringLabel = new FormattedString();
    formattedStringLabel.spans.push(title);
    formattedStringLabel.spans.push(subTitle);

    tabTitle.formattedText = formattedStringLabel;

    return tabTitle;
}

Tab creation here:

export const createTabs = (collection) =>
{
    const tabs = new Tabs();
    const tabStrip = new TabStrip();

    const tabStripItems = [];
    const tabContentItems = [];

    const tabLabel = createTabLabel( "Title", "Sub-Title");
    const tabStripItem = new TabStripItem();
    tabStripItem.label = tabLabel;

    const nestedStack = new StackLayout();
    nestedStack.addChild(tabLabel);

    const contentItem = new TabContentItem();
    contentItem.content = nestedStack;

    tabStripItems.push(tabStripItem);
    tabContentItems.push(contentItem);

    tabStrip.items = tabStripItems;
    tabs.tabStrip = tabStrip;

    tabs.items = tabContentItems;

    return tabs;
}

As you can see, the fontSize change gets applied when the Label is displayed on the StackLayout but not inside the TabStripItem

Oddly enough, changing the TabStripItem object's "textTransform" to "none" removes the uppercasing:

tabStripItem.textTransform = "none";

I'm just wondering how I can edit the Tab's label css programmatically. I'm using dynamic data. Number of tabs / name and content is all dynamic.

Answer 1

You could add title.class and subTitle.class to specify a css class name. If you need greater css specificity you could use title.style and subTitle.style and include in-line css.

Edit:

See the tabs styling doc. You may have limited options on the text size.

If you create a an empty, tabbed project you'll see how the tabs can be styled. In particular, in _app-common.scss, there's:

// Custom tabstrip item class
.navigation__item {
  &:active,
  &:active Label {
    @include colorize($contrasted-color: complementary background 20% 0%);
  }
}

You may be able to use variations of this. I have code with spans such as what you created, and specifying the style worked there. Tabs are different, though, as the styling doc indicates. Good luck!