1 | /**
|
2 | * Contains the TabView class, which represents a standard content component with tabs.
|
3 | */
|
4 |
|
5 | import { View } from '../core/view';
|
6 | import { ViewBase } from '../core/view-base';
|
7 | import { Property, CssProperty } from '../core/properties';
|
8 | import { EventData } from '../../data/observable';
|
9 | import { Color } from '../../color';
|
10 | import { CoreTypes } from '../../core-types';
|
11 | import { Style } from '../styling/style';
|
12 | /**
|
13 | * Represents a tab view entry.
|
14 | */
|
15 | export class TabViewItem extends ViewBase {
|
16 | /**
|
17 | * Gets or sets the title of the TabViewItem.
|
18 | */
|
19 | public title: string;
|
20 |
|
21 | /**
|
22 | * Gets or sets the view of the TabViewItem.
|
23 | */
|
24 | public view: View;
|
25 |
|
26 | /**
|
27 | * Gets or sets the icon source of the TabViewItem. This could either be a a file name or resource id.
|
28 | */
|
29 | public iconSource: string;
|
30 |
|
31 | /**
|
32 | * Gets or sets the text transform of the tab titles.
|
33 | */
|
34 | textTransform: CoreTypes.TextTransformType;
|
35 |
|
36 | /**
|
37 | * @private
|
38 | */
|
39 | canBeLoaded?: boolean;
|
40 | }
|
41 |
|
42 | /**
|
43 | * Defines the data for the TabView.selectedIndexChanged event.
|
44 | */
|
45 | export interface SelectedIndexChangedEventData extends EventData {
|
46 | /**
|
47 | * The old selected index.
|
48 | */
|
49 | oldIndex: number;
|
50 |
|
51 | /**
|
52 | * The new selected index.
|
53 | */
|
54 | newIndex: number;
|
55 | }
|
56 |
|
57 | /**
|
58 | * Represents a tab view.
|
59 | */
|
60 | export class TabView extends View {
|
61 | /**
|
62 | * Gets or sets the items of the TabView.
|
63 | */
|
64 | items: Array<TabViewItem>;
|
65 |
|
66 | /**
|
67 | * Gets or sets the selectedIndex of the TabView.
|
68 | */
|
69 | selectedIndex: number;
|
70 |
|
71 | /**
|
72 | * Gets or sets the font size of the tabs titles.
|
73 | */
|
74 | tabTextFontSize: number;
|
75 |
|
76 | /**
|
77 | * Gets or sets the text color of the tabs titles.
|
78 | */
|
79 | tabTextColor: Color;
|
80 |
|
81 | /**
|
82 | * Gets or sets the background color of the tabs.
|
83 | */
|
84 | tabBackgroundColor: Color;
|
85 |
|
86 | /**
|
87 | * Gets or sets the text color of the selected tab title.
|
88 | */
|
89 | selectedTabTextColor: Color;
|
90 |
|
91 | /**
|
92 | * Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
|
93 | */
|
94 | androidSelectedTabHighlightColor: Color;
|
95 |
|
96 | /**
|
97 | * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
|
98 | */
|
99 | android: any /* android.view.View */; //androidx.core.view.ViewPager;
|
100 |
|
101 | /**
|
102 | * Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS.
|
103 | */
|
104 | ios: any /* UITabBarController */;
|
105 |
|
106 | /**
|
107 | * Gets or set the UIImageRenderingMode of the tab icons in iOS. Defaults to "automatic"
|
108 | * Valid values are:
|
109 | * - automatic
|
110 | * - alwaysOriginal
|
111 | * - alwaysTemplate
|
112 | */
|
113 | iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
|
114 |
|
115 | /**
|
116 | * Gets or sets the rendering mode of tab icons on Android. Defaults to "original"
|
117 | * Valid values are:
|
118 | * - alwaysOriginal
|
119 | * - alwaysTemplate
|
120 | */
|
121 | androidIconRenderingMode: 'alwaysOriginal' | 'alwaysTemplate';
|
122 |
|
123 | /**
|
124 | * Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state.
|
125 | * Tabs beyond this limit will be recreated from the TabView when needed.
|
126 | */
|
127 | androidOffscreenTabLimit: number;
|
128 |
|
129 | /**
|
130 | * Gets or set the tabs vertical position.
|
131 | * Valid values are:
|
132 | * - top
|
133 | * - bottom
|
134 | */
|
135 | androidTabsPosition: 'top' | 'bottom';
|
136 |
|
137 | /**
|
138 | * Gets or sets a value indicating whether swipe gesture is enabled for Android.
|
139 | */
|
140 | androidSwipeEnabled: boolean;
|
141 |
|
142 | /**
|
143 | * String value used when hooking to the selectedIndexChanged event.
|
144 | */
|
145 | public static selectedIndexChangedEvent: string;
|
146 |
|
147 | /**
|
148 | * Adds a listener for the specified event name.
|
149 | *
|
150 | * @param eventName The name of the event.
|
151 | * @param callback The event listener to add. Will be called when an event of
|
152 | * the given name is raised.
|
153 | * @param thisArg An optional parameter which, when set, will be bound as the
|
154 | * `this` context when the callback is called. Falsy values will be not be
|
155 | * bound.
|
156 | */
|
157 | on(eventName: string, callback: (data: EventData) => void, thisArg?: any): void;
|
158 |
|
159 | /**
|
160 | * Raised when the selected index changes.
|
161 | */
|
162 | on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any): void;
|
163 | }
|
164 |
|
165 | export const itemsProperty: Property<TabView, TabViewItem[]>;
|
166 | export const selectedIndexProperty: Property<TabView, number>;
|
167 |
|
168 | export const tabTextFontSizeProperty: CssProperty<Style, number>;
|
169 | export const tabTextColorProperty: CssProperty<Style, Color>;
|
170 | export const tabBackgroundColorProperty: CssProperty<Style, Color>;
|
171 | export const selectedTabTextColorProperty: CssProperty<Style, Color>;
|
172 | export const androidSelectedTabHighlightColorProperty: CssProperty<Style, Color>;
|
173 | export const androidOffscreenTabLimitProperty: Property<TabView, number>;
|
174 | export const iosIconRenderingModeProperty: Property<TabView, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>;
|
175 | export const androidIconRenderingModeProperty: Property<TabView, 'alwaysOriginal' | 'alwaysTemplate'>;
|