diff --git a/api-reports/NativeScript.api.md b/api-reports/NativeScript.api.md index 4689936ad..f8662a406 100644 --- a/api-reports/NativeScript.api.md +++ b/api-reports/NativeScript.api.md @@ -2258,6 +2258,8 @@ export class TabNavigationBase extends View { setTabBarIconColor(tabStripItem: TabStripItem, value: any): void + setTabBarIconSource(tabStripItem: TabStripItem, value: any): void + setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void setTabBarItemColor(tabStripItem: TabStripItem, value: any): void diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css index 46d672d3e..7b8624417 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css +++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css @@ -10,14 +10,17 @@ TabStripItem:active { background-color: magenta; } -.defaultCssClass { +.tabsClass0 { +} + +.tabsClass1 { background-color: #79d2a6; highlight-color: green; selected-item-color: yellow; un-selected-item-color: blue; } -.newTabsClass { +.tabsClass2 { background-color: orangered; highlight-color: lightgreen; selected-item-color: whitesmoke; diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts index a815c39a3..30fa51567 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts +++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts @@ -6,5 +6,34 @@ export function onButtonTap(args) { const page = (args.object).page; const bottomNavigation = (page.getViewById("bottomNavigation")); - bottomNavigation.tabStrip.className = "newTabsClass"; + switch (bottomNavigation.tabStrip.className) { + case "tabsClass0": + bottomNavigation.tabStrip.className = "tabsClass1"; + break; + case "tabsClass1": + bottomNavigation.tabStrip.className = "tabsClass2"; + break; + case "tabsClass2": + bottomNavigation.tabStrip.className = "tabsClass0"; + break; + } +} + +export function onChangeIconSourceTap(args) { + const page = (args.object).page; + const bottomNavigation = (page.getViewById("bottomNavigation")); + + const tabStripItem0 = bottomNavigation.tabStrip.items[0]; + const tabStripItem1 = bottomNavigation.tabStrip.items[1]; + const tabStripItem2 = bottomNavigation.tabStrip.items[2]; + + const iconSource0 = tabStripItem0.iconSource; + + tabStripItem0.iconSource = tabStripItem1.iconSource; + + tabStripItem1.iconClass = "font-awesome font-size"; + tabStripItem1.iconSource = tabStripItem2.iconSource; + + tabStripItem2.iconClass = "font-awesome font-size"; + tabStripItem2.iconSource = iconSource0; } \ No newline at end of file diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml index f76227b01..989fab9ed 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml +++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml @@ -2,10 +2,11 @@