UNPKG

5.17 kBTypeScriptView Raw
1/**
2 * Contains the TabView class, which represents a standard content component with tabs.
3 */
4
5import { View } from '../core/view';
6import { ViewBase } from '../core/view-base';
7import { Property, CssProperty } from '../core/properties';
8import { EventData } from '../../data/observable';
9import { Color } from '../../color';
10import { CoreTypes } from '../../core-types';
11import { Style } from '../styling/style';
12/**
13 * Represents a tab view entry.
14 */
15export 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 */
45export 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 */
60export 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 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
149 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
150 * @param callback - Callback function which will be executed when event is raised.
151 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
152 */
153 on(eventNames: string, callback: (data: EventData) => void, thisArg?: any): void;
154
155 /**
156 * Raised when the selected index changes.
157 */
158 on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any): void;
159}
160
161export const itemsProperty: Property<TabView, TabViewItem[]>;
162export const selectedIndexProperty: Property<TabView, number>;
163
164export const tabTextFontSizeProperty: CssProperty<Style, number>;
165export const tabTextColorProperty: CssProperty<Style, Color>;
166export const tabBackgroundColorProperty: CssProperty<Style, Color>;
167export const selectedTabTextColorProperty: CssProperty<Style, Color>;
168export const androidSelectedTabHighlightColorProperty: CssProperty<Style, Color>;
169export const androidOffscreenTabLimitProperty: Property<TabView, number>;
170export const iosIconRenderingModeProperty: Property<TabView, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>;
171export const androidIconRenderingModeProperty: Property<TabView, 'alwaysOriginal' | 'alwaysTemplate'>;