From 34d8ccad0360d11ed2011949ee9ed686a3c259ff Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 23 Mar 2020 17:37:38 +0200 Subject: [PATCH 1/2] feat: stylinh options --- .../tabs/styling/article.md | 10 +++++- .../tabs/styling/styling-page.css | 20 +++-------- .../tabs/usage/article.md | 34 ++++++++++++++++++- 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/app/ns-ui-widgets-category/tabs/styling/article.md b/app/ns-ui-widgets-category/tabs/styling/article.md index d706e2c..67f92c9 100644 --- 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. + -> **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. \ No newline at end of file diff --git a/app/ns-ui-widgets-category/tabs/styling/styling-page.css b/app/ns-ui-widgets-category/tabs/styling/styling-page.css index 1e2eac3..1c129e5 100644 --- 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 */ \ No newline at end of file diff --git a/app/ns-ui-widgets-category/tabs/usage/article.md b/app/ns-ui-widgets-category/tabs/usage/article.md index 0ab2878..b3b3d75 100644 --- 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: -> **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components. \ No newline at end of file +> **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 +``` + From a48e2afd778f412039e82a52278037b18aa34909 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 23 Mar 2020 17:44:00 +0200 Subject: [PATCH 2/2] add BottomNav --- .../bottom-navigation/styling/styling-page.css | 10 ++++------ .../bottom-navigation/styling/styling-page.xml | 6 +++--- 2 files changed, 7 insertions(+), 9 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 index c0d1fad..9e13c4a 100644 --- 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 index 4bc710c..172ae45 100644 --- 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 @@ - + - + - +