Skip to content

Commit 11f0d6e

Browse files
MartoYankovMartoYankov
authored
feat(tabview): add tab text font size property (#5752)
* feat(tabview): add tab text font size property * chore(tabview): set tab font size default value * chore(tabview): move font implementation to widget * chore(tabview): fix font size get return type
1 parent 2168c36 commit 11f0d6e

9 files changed

Lines changed: 64 additions & 3 deletions

File tree

‎apps/app/ui-tests-app/tab-view/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,6 @@ export function loadExamples() {
2323
examples.set("text-transform", "tab-view/text-transform");
2424
examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
2525
examples.set("issue-5470", "tab-view/issue-5470");
26+
examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size");
2627
return examples;
2728
}

‎apps/app/ui-tests-app/tab-view/tab-view-tab-text-font-size.xml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Page>
2+
<TabView tabTextFontSize="8">
3+
<TabView.items>
4+
<TabViewItem title="First">
5+
<TabViewItem.view>
6+
<GridLayout>
7+
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
8+
</GridLayout>
9+
</TabViewItem.view>
10+
</TabViewItem>
11+
<TabViewItem title="Second">
12+
<TabViewItem.view>
13+
<GridLayout>
14+
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
15+
</GridLayout>
16+
</TabViewItem.view>
17+
</TabViewItem>
18+
</TabView.items>
19+
</TabView>
20+
</Page>

‎tns-core-modules/ui/styling/style/style.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ export class Style extends Observable {
120120
public verticalAlignment: VerticalAlignment;
121121

122122
// TabView-specific props
123+
public tabTextFontSize: number;
123124
public tabTextColor: Color;
124125
public tabBackgroundColor: Color;
125126
public selectedTabTextColor: Color;

‎tns-core-modules/ui/styling/style/style.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class Style extends Observable implements StyleDefinition {
9393
public verticalAlignment: VerticalAlignment;
9494

9595
// TabView-specific props
96+
public tabTextFontSize: number;
9697
public tabTextColor: Color;
9798
public tabBackgroundColor: Color;
9899
public selectedTabTextColor: Color;

‎tns-core-modules/ui/tab-view/tab-view-common.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,13 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
103103
this.style.androidSelectedTabHighlightColor = value;
104104
}
105105

106+
get tabTextFontSize(): number {
107+
return this.style.tabTextFontSize;
108+
}
109+
set tabTextFontSize(value: number) {
110+
this.style.tabTextFontSize = value;
111+
}
112+
106113
get tabTextColor(): Color {
107114
return this.style.tabTextColor;
108115
}
@@ -240,6 +247,9 @@ androidOffscreenTabLimitProperty.register(TabViewBase);
240247
export const androidTabsPositionProperty = new Property<TabViewBase, "top" | "bottom">({ name: "androidTabsPosition", defaultValue: "top" });
241248
androidTabsPositionProperty.register(TabViewBase);
242249

250+
export const tabTextFontSizeProperty = new CssProperty<Style, number>({ name: "tabTextFontSize", cssName: "tab-text-font-size", valueConverter: (v) => parseFloat(v) });
251+
tabTextFontSizeProperty.register(Style);
252+
243253
export const tabTextColorProperty = new CssProperty<Style, Color>({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
244254
tabTextColorProperty.register(Style);
245255

‎tns-core-modules/ui/tab-view/tab-view.android.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Font } from "../styling/font";
33

44
import {
55
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
6-
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty,
6+
tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty,
77
androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty,
88
fontSizeProperty, fontInternalProperty, View, layout, traceCategory, traceEnabled,
99
traceWrite, Color
@@ -624,6 +624,17 @@ export class TabView extends TabViewBase {
624624
}
625625
}
626626

627+
[tabTextFontSizeProperty.getDefault](): number {
628+
return this._tabLayout.getTabTextFontSize();
629+
}
630+
[tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
631+
if (typeof value === "number") {
632+
this._tabLayout.setTabTextFontSize(value);
633+
} else {
634+
this._tabLayout.setTabTextFontSize(value.nativeSize);
635+
}
636+
}
637+
627638
[tabTextColorProperty.getDefault](): number {
628639
return this._tabLayout.getTabTextColor();
629640
}

‎tns-core-modules/ui/tab-view/tab-view.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@ export class TabView extends View {
6464
*/
6565
selectedIndex: number;
6666

67+
/**
68+
* Gets or sets the font size of the tabs titles.
69+
*/
70+
tabTextFontSize: number;
71+
6772
/**
6873
* Gets or sets the text color of the tabs titles.
6974
*/
@@ -139,6 +144,7 @@ export class TabView extends View {
139144
export const itemsProperty: Property<TabView, TabViewItem[]>;
140145
export const selectedIndexProperty: Property<TabView, number>;
141146

147+
export const tabTextFontSizeProperty: CssProperty<Style, number>;
142148
export const tabTextColorProperty: CssProperty<Style, Color>;
143149
export const tabBackgroundColorProperty: CssProperty<Style, Color>;
144150
export const selectedTabTextColorProperty: CssProperty<Style, Color>;

‎tns-core-modules/ui/tab-view/tab-view.ios.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Font } from "../styling/font";
44
import { ios as iosView, ViewBase } from "../core/view";
55
import {
66
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
7-
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty,
7+
tabTextColorProperty, tabTextFontSizeProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty,
88
View, fontInternalProperty, layout, traceEnabled, traceWrite, traceCategories, Color
99
} from "./tab-view-common"
1010
import { textTransformProperty, TextTransform, getTransformedText } from "../text-base";
@@ -448,6 +448,13 @@ export class TabView extends TabViewBase {
448448
selectedIndexProperty.coerce(this);
449449
}
450450

451+
[tabTextFontSizeProperty.getDefault](): number {
452+
return null;
453+
}
454+
[tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
455+
this._updateIOSTabBarColorsAndFonts();
456+
}
457+
451458
[tabTextColorProperty.getDefault](): UIColor {
452459
return null;
453460
}
@@ -504,7 +511,9 @@ interface TabStates {
504511
function getTitleAttributesForStates(tabView: TabView): TabStates {
505512
const result: TabStates = {};
506513

507-
const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10));
514+
const defaultTabItemFontSize = 10;
515+
const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize;
516+
const font: UIFont = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
508517
const tabItemTextColor = tabView.style.tabTextColor;
509518
const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
510519
result.normalState = { [NSFontAttributeName]: font }

‎tns-platform-declarations/android/org.nativescript.widgets.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,8 @@
362362
getTabTextColor(): number;
363363
setSelectedTabTextColor(color: number): void;
364364
getSelectedTabTextColor(): number;
365+
setTabTextFontSize(fontSize: number): void;
366+
getTabTextFontSize(): number;
365367

366368
setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
367369
updateItemAt(position: number, itemSpec: TabItemSpec): void;

0 commit comments

Comments
 (0)