Nativescript-Ngx-TabView

一个用于渲染带有多种可配置选项的标签视图的 Nativescript Angular UI 控件

设置

npm install nativescript-ngx-tabview --save

将模块导入您的 app-module

import { TabViewModule } from 'nativescript-ngx-tabview';

入门指南

如下例所示，定义 TabView 模板

<TabView (tabChange)="watchTabChange($event)">
  <TabStrip position="left" overlay justifyContent="space-between">
    <TabLabel>
      <!-- Define the Tab Label here -->
    </TabLabel>
    <TabLabel>
      <!-- Define the Tab Label here -->
    </TabLabel>
    <TabLabel>
      <!-- Define the Tab Label here -->
    </TabLabel>
  </TabStrip>
  <TabGroup>
    <Tab>
      <!-- Insert Tab Content here -->
    </Tab>
    <Tab>
      <!-- Insert Tab Content here -->
    </Tab>
    <Tab>
      <!-- Insert Tab Content here -->
    </Tab>
  </TabGroup>
</TabView>

配置

TabStrip 允许进行两个主要的配置设置

• 位置 [顶部/左侧/底部/右侧]
• 覆盖

覆盖 设置将标签条覆盖在标签视图中，默认情况下，标签条和标签内容将出现在单独的行中。

tabChange() 事件将在标签切换时发出索引

TabStrip 是一个 FlexboxLayout，因此可以应用所有相关样式

示例

在示例应用程序中提供