Skip to content

Commit e56baed

Browse files
author
Nikolay Tsonev
committed
example how to use selectedTabTextColor, tabBackgroundColor, textTransform
1 parent 7b33e9c commit e56baed

1 file changed

Lines changed: 27 additions & 0 deletions

File tree

‎tests/app/ui/tab-view/tab-view.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,30 @@ Using a TabView requires the "ui/tab-view" module.
4747
export function onSelectedIndexChanged(args) {...}
4848
```
4949
> Note: Initially selectedIndexChanged event will be raised just after adding a new items to TabView without any user interaction, which will happen on TabView loaded. SelectedIndexChanged event will be raised because value of the selectedIndex property is changed from undefined (default) (with no items) to 0 (first tab item). Depends on how TabView.items are set or added it may happen to raise one or two times selectedIndexChanged event even before page events (loaded, navigatingTo, navigatedTo, ...).
50+
51+
## Styling TabView
52+
53+
For the TabView component could be set three different styling properties
54+
55+
* `selectedTabTextColor` (coresponding CSS property `selected-tab-text-color `) - change the color of the text, while selecting some of the tabs.
56+
* `tabBackgroundColor` (coresponding CSS property `tab-background-color`) - changing the background of the tabs.
57+
* `textTransform` (coresponding CSS property `text-transform`) - setting up textTransform individual for every `TabViewItem`. Value options: `capitalize`, `lowercase`, `none`, `uppercase`.
58+
59+
XML
60+
61+
```
62+
<TabView selectedTabTextColor="#00FF00" tabBackgroundColor="#FF0000" >
63+
<TabView.items>
64+
<TabViewItem title="Tab 1" textTransform="lowercase">
65+
<TabViewItem.view>
66+
<Label text="Label in Tab1" />
67+
</TabViewItem.view>
68+
</TabViewItem>
69+
<TabViewItem title="Tab 2" textTransform="lowercase">
70+
<TabViewItem.view>
71+
<Label text="Label in Tab2" />
72+
</TabViewItem.view>
73+
</TabViewItem>
74+
</TabView.items>
75+
</TabView>
76+
```

0 commit comments

Comments
 (0)