Merge pull request NativeScript#177 from NativeScript/niliev/tabs-sty…

…ling docs: add Tabs/BottomNavigaiton styling options
celsobessa · Mar 23, 2020 · 30302ae · 30302ae
2 parents c018d38 + a48e2af
commit 30302ae
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 deletions.
diff --git a/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.css b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.css
@@ -1,12 +1,10 @@
 /* >> bottom-nav-theming-css */
-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;

diff --git a/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.xml b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.xml
@@ -8,15 +8,15 @@
 
         <!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
         <TabStrip>
-            <TabStripItem class="tabstripitem">
+            <TabStripItem>
                 <Label text="Home"></Label>
                 <Image src="font://&#xf015;" class="fas t-36"></Image>
             </TabStripItem>
-            <TabStripItem class="tabstripitem">
+            <TabStripItem>
                 <Label text="Account"></Label>
                 <Image src="font://&#xf007;" class="fas t-36"></Image>
             </TabStripItem>
-            <TabStripItem class="tabstripitem">
+            <TabStripItem>
                 <Label text="Search"></Label>
                 <Image src="font://&#xf00e;" class="fas t-36"></Image>
             </TabStripItem>

diff --git a/app/ns-ui-widgets-category/tabs/styling/article.md b/app/ns-ui-widgets-category/tabs/styling/article.md
@@ -1,7 +1,15 @@
 > **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'/>
 
-> **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.
+> **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. Those properties can be set inline or via CSS.
 
 > **Note:** On iOS, the TabStripItems can not be stylied individually.
diff --git a/app/ns-ui-widgets-category/tabs/styling/styling-page.css b/app/ns-ui-widgets-category/tabs/styling/styling-page.css
@@ -1,19 +1,10 @@
 /* >> tabs-theming-css */
-
-Tabs.bottom-nav {
-    background-color: orangered;
-    color: gold;
-    font-size: 18;
-}
-
-TabStripItem.tabstripitem-active {
-    background-color: teal;
+TabStrip {
+    selected-item-color: blueviolet;
+    un-selected-item-color: brown;
+    highlight-color: gold;
 }
 
-TabStripItem.tabstripitem-active:active {
-    background-color: yellowgreen;
-} 
-
 TabContentItem.first-tabcontent {
     background-color: seashell;
     color: olive;
@@ -26,7 +17,4 @@ TabContentItem.third-tabcontent {
     background-color: blueviolet;
     color: antiquewhite;
 }
-Tabs TabStrip{
-    highlight-color: red;
-}
 /* << tabs-theming-css */
diff --git a/app/ns-ui-widgets-category/tabs/usage/article.md b/app/ns-ui-widgets-category/tabs/usage/article.md
@@ -4,4 +4,36 @@ The `Tabs` component contains two sub-components:
 
 <snippet id='tabs-usage-xml'/>
 
-> **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components.
+> **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components.on
+
+### Dynamic Creation
+
+To create a `Tabs` component programatically, we need to use special properties for creating each `TabStripItem`. Those properties are `title`, `iconSource` and `iconClass` (that are used to create the coresponding `Label` and `Image`).
+
+```JavaScript
+let tabs = new Tabs();
+let tabStrip = new TabStrip();
+
+let tabStripItem1 = new TabStripItem();
+tabStripItem1.title = "Tab 1";
+tabStripItem1.iconSource = "font://" + String.fromCharCode(charCode1);
+tabStripItem1.iconClass = "far"; // e.g., FontAвесоме
+
+let tabStripItem2 = new TabStripItem();
+tabStripItem2.title = "Tab 2";
+tabStripItem2.iconSource = "font://" + String.fromCharCode(charCode2);
+tabStripItem2.iconClass = "far"; // e.g., FontAвесоме
+
+let tabStripItems = [tabStripItem1, tabStripItem2];
+tabStrip.items = tabStripItems;
+
+let contentItems = [conterntItem1, contentItem2]; // where contentItem1 and 2 are the layouts/frames that holds the actual content
+
+tabs.tabStrip = tabStrip;
+tabs.items = contentItems;
+
+let stack = new StackLayout(); // the ""simple rule
+stack.addChild(tabs)
+somePage.content = stack; // base example for adding the newly created Tabs to the current page
+```
+