NativeScript 的 Material Tabs 实现

该模块在 iOS 和 Android 平台上都实现了 Material 标签。当指示器移动时包含动画效果。

TabLayout 扩展了 nativescript GridLayout

export function selectTabs(args) {
    console.log("SELECT TABS: ", args.forward, args.index)
}

TabSep 是指示器，TabTitle 扩展了 Label

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:tab="nativescript-nbmaterial-tabs">
 		<tab:Tabs select="selectTabs" colSpan="4" row="1">
				<tab:TabSep/>
				<tab:TabItem>
					<tab:TabTitle text="Mes Chouks" />
				</tab:TabItem>
				<tab:TabItem>
					<tab:TabTitle text="Mes Catégories" />
				</tab:TabItem>
				<tab:TabItem>
					<tab:TabTitle text="Mes Recherches" />
				</tab:TabItem>
				<tab:TabItem>
					<tab:TabTitle text="Mes Pages" />
				</tab:TabItem>
				<tab:TabItem>
					<tab:TabTitle text="Mes Aller" />
				</tab:TabItem>
				<tab:TabItem>
					<tab:TabTitle text="Mes Pourquoi" />
				</tab:TabItem>
			</tab:Tabs>
</Page>

}

TabLayout 具有以下接口

export declare class Tabs extends Layout {
    public static selectEvent: string;
    items: TabItem[];
    selectedIndex: number;
    rippleColor: Color;
    barColor: Color;
    unchecked: number;
    activems: number;
    inactivems: number;
    autoselect: boolean;
    scrollable: boolean;
    isActive(item: TabItem);
    setSelected(item: TabItem);
}
export declare class TabItem extends AbsoluteLayout {
    public static tapEvent: string;
    tab: Tabs;
    isActive(): boolean;
    activate(): void;
    unactivate(): void;
}
export declare class TabTitle extends Label {
}
export declare class TabIcon extends Label {
} 
export declare class TabSep extends View {
} 

查看所有模块