diff --git a/apps/app/ui-tests-app/tab-view/main-page.ts b/apps/app/ui-tests-app/tab-view/main-page.ts index aca658d9c..70833eda4 100644 --- a/apps/app/ui-tests-app/tab-view/main-page.ts +++ b/apps/app/ui-tests-app/tab-view/main-page.ts @@ -23,5 +23,6 @@ export function loadExamples() { examples.set("text-transform", "tab-view/text-transform"); examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position"); examples.set("issue-5470", "tab-view/issue-5470"); + examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size"); return examples; } diff --git a/apps/app/ui-tests-app/tab-view/tab-view-tab-text-font-size.xml b/apps/app/ui-tests-app/tab-view/tab-view-tab-text-font-size.xml new file mode 100644 index 000000000..e1f7d3992 --- /dev/null +++ b/apps/app/ui-tests-app/tab-view/tab-view-tab-text-font-size.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tns-core-modules/ui/styling/style/style.d.ts b/tns-core-modules/ui/styling/style/style.d.ts index 39b5ff6f3..403726c48 100644 --- a/tns-core-modules/ui/styling/style/style.d.ts +++ b/tns-core-modules/ui/styling/style/style.d.ts @@ -120,6 +120,7 @@ export class Style extends Observable { public verticalAlignment: VerticalAlignment; // TabView-specific props + public tabTextFontSize: number; public tabTextColor: Color; public tabBackgroundColor: Color; public selectedTabTextColor: Color; diff --git a/tns-core-modules/ui/styling/style/style.ts b/tns-core-modules/ui/styling/style/style.ts index 9dc705841..62f3eefc7 100644 --- a/tns-core-modules/ui/styling/style/style.ts +++ b/tns-core-modules/ui/styling/style/style.ts @@ -93,6 +93,7 @@ export class Style extends Observable implements StyleDefinition { public verticalAlignment: VerticalAlignment; // TabView-specific props + public tabTextFontSize: number; public tabTextColor: Color; public tabBackgroundColor: Color; public selectedTabTextColor: Color; diff --git a/tns-core-modules/ui/tab-view/tab-view-common.ts b/tns-core-modules/ui/tab-view/tab-view-common.ts index 062d19b15..b4d6429ca 100644 --- a/tns-core-modules/ui/tab-view/tab-view-common.ts +++ b/tns-core-modules/ui/tab-view/tab-view-common.ts @@ -103,6 +103,13 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom this.style.androidSelectedTabHighlightColor = value; } + get tabTextFontSize(): number { + return this.style.tabTextFontSize; + } + set tabTextFontSize(value: number) { + this.style.tabTextFontSize = value; + } + get tabTextColor(): Color { return this.style.tabTextColor; } @@ -240,6 +247,9 @@ androidOffscreenTabLimitProperty.register(TabViewBase); export const androidTabsPositionProperty = new Property({ name: "androidTabsPosition", defaultValue: "top" }); androidTabsPositionProperty.register(TabViewBase); +export const tabTextFontSizeProperty = new CssProperty({ name: "tabTextFontSize", cssName: "tab-text-font-size", valueConverter: (v) => parseFloat(v) }); +tabTextFontSizeProperty.register(Style); + export const tabTextColorProperty = new CssProperty({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); tabTextColorProperty.register(Style); diff --git a/tns-core-modules/ui/tab-view/tab-view.android.ts b/tns-core-modules/ui/tab-view/tab-view.android.ts index a07315e35..f97b29722 100644 --- a/tns-core-modules/ui/tab-view/tab-view.android.ts +++ b/tns-core-modules/ui/tab-view/tab-view.android.ts @@ -3,7 +3,7 @@ import { Font } from "../styling/font"; import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, - tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, + tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty, androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty, fontSizeProperty, fontInternalProperty, View, layout, traceCategory, traceEnabled, traceWrite, Color @@ -624,6 +624,17 @@ export class TabView extends TabViewBase { } } + [tabTextFontSizeProperty.getDefault](): number { + return this._tabLayout.getTabTextFontSize(); + } + [tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) { + if (typeof value === "number") { + this._tabLayout.setTabTextFontSize(value); + } else { + this._tabLayout.setTabTextFontSize(value.nativeSize); + } + } + [tabTextColorProperty.getDefault](): number { return this._tabLayout.getTabTextColor(); } diff --git a/tns-core-modules/ui/tab-view/tab-view.d.ts b/tns-core-modules/ui/tab-view/tab-view.d.ts index 4886f2000..759cb8229 100644 --- a/tns-core-modules/ui/tab-view/tab-view.d.ts +++ b/tns-core-modules/ui/tab-view/tab-view.d.ts @@ -64,6 +64,11 @@ export class TabView extends View { */ selectedIndex: number; + /** + * Gets or sets the font size of the tabs titles. + */ + tabTextFontSize: number; + /** * Gets or sets the text color of the tabs titles. */ @@ -139,6 +144,7 @@ export class TabView extends View { export const itemsProperty: Property; export const selectedIndexProperty: Property; +export const tabTextFontSizeProperty: CssProperty; export const tabTextColorProperty: CssProperty; export const tabBackgroundColorProperty: CssProperty; export const selectedTabTextColorProperty: CssProperty; diff --git a/tns-core-modules/ui/tab-view/tab-view.ios.ts b/tns-core-modules/ui/tab-view/tab-view.ios.ts index e5af7b598..cd272fa46 100644 --- a/tns-core-modules/ui/tab-view/tab-view.ios.ts +++ b/tns-core-modules/ui/tab-view/tab-view.ios.ts @@ -4,7 +4,7 @@ import { Font } from "../styling/font"; import { ios as iosView, ViewBase } from "../core/view"; import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, - tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty, + tabTextColorProperty, tabTextFontSizeProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty, View, fontInternalProperty, layout, traceEnabled, traceWrite, traceCategories, Color } from "./tab-view-common" import { textTransformProperty, TextTransform, getTransformedText } from "../text-base"; @@ -448,6 +448,13 @@ export class TabView extends TabViewBase { selectedIndexProperty.coerce(this); } + [tabTextFontSizeProperty.getDefault](): number { + return null; + } + [tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) { + this._updateIOSTabBarColorsAndFonts(); + } + [tabTextColorProperty.getDefault](): UIColor { return null; } @@ -504,7 +511,9 @@ interface TabStates { function getTitleAttributesForStates(tabView: TabView): TabStates { const result: TabStates = {}; - const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10)); + const defaultTabItemFontSize = 10; + const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize; + const font: UIFont = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); const tabItemTextColor = tabView.style.tabTextColor; const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; result.normalState = { [NSFontAttributeName]: font } diff --git a/tns-platform-declarations/android/org.nativescript.widgets.d.ts b/tns-platform-declarations/android/org.nativescript.widgets.d.ts index 1d336d827..c56eb5071 100644 --- a/tns-platform-declarations/android/org.nativescript.widgets.d.ts +++ b/tns-platform-declarations/android/org.nativescript.widgets.d.ts @@ -362,6 +362,8 @@ getTabTextColor(): number; setSelectedTabTextColor(color: number): void; getSelectedTabTextColor(): number; + setTabTextFontSize(fontSize: number): void; + getTabTextFontSize(): number; setItems(items: Array, viewPager: android.support.v4.view.ViewPager): void; updateItemAt(position: number, itemSpec: TabItemSpec): void;