Tutorial inconsistencies: TabStripItem:active not changing the background-color

n8-mills commented 4 years ago

I'm going through the hello world tutorial. Since I was not following 100% I grabbed the final code blocks from step 14 before the CSS kicks in:

            <TabStripItem>
                <Label text="My Tasks"></Label>
            </TabStripItem>
            <TabStripItem>
                <Label text="Completed"></Label>
            </TabStripItem>

Fast forward to step 19 where there is CSS styling added:

<style scoped>
    TabStripItem.tabstripitem {
        background-color: teal;
    }

    TabStripItem.tabstripitem:active {
        background-color: yellowgreen;
    }
</style>

These result in no change. I'm trying to parse the error log but it's pretty far above my head.

I did not try to use this outside of {N} Playground

I am using Chrome

My device that is exhibiting the bug is an Android: LG Q7+ | LM-Q610(FGN) | Android 9 | 1.30.0 | 6.5.0

There is a similar report of this bug here: https://github.com/NativeScript/NativeScript/issues/7494 but it is closed and merged into a post that does not address the bug (apparently).

The link to my code is https://play.nativescript.org/?template=play-vue&id=rtlWm9&v=8. I suspect that this is not going to get anyone to my project but I can't see another way to share a link.

n8-mills commented 4 years ago

Step 20 has no example code at all. I guess I need to google this?

n8-mills commented 4 years ago

Found the answer in the documentation: https://docs.nativescript.org/ui/components/bottom-navigation

<TabStripItem> needs to have a class assigned to it like this:

<TabStripItem class="tabstripitem">

Step 14 or 19 of the "hello world" tutorial should be updated.

NativeScript / playground-feedback

Tutorial inconsistencies: TabStripItem:active not changing the background-color #184