Merge pull request #445 from NativeScript/niliev/tabs-styling

docs: add Tabs/BottomNavigaiton styling options

Author: NickIliev

app/ng-ui-widgets-category/bottom-navigation/styling/styling.component.css

@@ -1,12 +1,10 @@
 /* >> bottom-nav-theming-css-ng */
-TabStripItem.tabstripitem {
-    background-color: teal;
+TabStrip {
+    selected-item-color: blueviolet;
+    un-selected-item-color: brown;
+    highlight-color: gold;
 }
 
-TabStripItem.tabstripitem:active {
-    background-color: yellowgreen;
-} 
-
 TabContentItem.first-tabcontent {
     background-color: seashell;
     color: olive;

app/ng-ui-widgets-category/tabs/styling/article.md

@@ -1,5 +1,13 @@
 > **Note:** - The integration with `nativescript-theme` and the support for custom CSS is currently under development and is on its way.
 
+The main styling options are introduced with three specific properties that should be set on the `TabStrip` component.
+
+- `selectedItemnColor`: Sets the text color of the selected tab strip item. Also sets the color of the tab strip icon when the icon is an icon font (`font://`).
+- `unSelectedItemColor`: Sets the text color of the unselected tab strip items. Also sets the color of the tab strip icon when the icon is an icon font (`font://`).
+- `highlightColor`: Sets the color of the underline for the selected tab strip item.
+
+Those properties can be set dynamically, inline and via CSS.
+
 <snippet id='tabs-theming-css-ng'/>
 
 > **Note:** Currently, we can set only the `backgroundColor`, `color`, `fontFamily`, `fontSize`, `fontStyle`, `fontWeight` and `textTransform` styling properties to the `Label` and `Image` components inside the TabStripItem. More about the usage of those properties can be found in the [Styling]({%slug styling%}#supported-css-properties) article.

app/ng-ui-widgets-category/tabs/styling/styling.component.css

@@ -1,18 +1,10 @@
 /* >> tabs-theming-css-ng */
-Tabs.bottom-nav {
-    background-color: orangered;
-    color: gold;
-    font-size: 18;
+TabStrip {
+    selected-item-color: blueviolet;
+    un-selected-item-color: brown;
+    highlight-color: gold;
 }
 
-TabStripItem.tabstripitem-active {
-    background-color: teal;
-}
-
-TabStripItem.tabstripitem-active:active {
-    background-color: yellowgreen;
-} 
-
 TabContentItem.first-tabcontent {
     background-color: seashell;
     color: olive;
@@ -25,7 +17,4 @@ TabContentItem.third-tabcontent {
     background-color: blueviolet;
     color: antiquewhite;
 }
-Tabs TabStrip{
-    highlight-color: red;
-}
 /* << tabs-theming-css-ng */