TabView

<TabView> 是一个 UI 组件，用于显示分组到选项卡中的内容，并允许用户在它们之间切换。

<TabView>
  <TabViewItem title="First">
    <Label text="First Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Second">
    <Label text="Second Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Third">
    <Label text="Third Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
</TabView>

属性 ​

selectedIndex ​

selectedIndex: number

获取或设置当前选定的选项卡。

默认为 0。

tabTextColor ​

tabTextColor: Color

获取或设置选项卡标题的文本颜色。

.tab-view {
  tab-text-color: #fff;
}

参见 Color。

tabTextFontSize ​

tabTextFontSize: number

获取或设置选项卡标题的字体大小。

.tab-view {
  tab-text-font-size: 24;
}

tabBackgroundColor ​

tabBackgroundColor: Color

设置选项卡的背景颜色。

.tab-view {
  tab-background-color: #3d5a80;
}

参见 Color。

androidSelectedTabHighlightColor ​

androidSelectedTabHighlightColor: Color

设置选项卡的下划线颜色。**仅限 Android**。

.tab-view {
   android-selected-tab-highlight-color:: #3d5a80;
}

参见 Color。

androidTabsPosition ​

androidTabsPosition: 'top' | 'bottom'

设置选项卡的位置。**仅限 Android**。

默认为 top。

iosIconRenderingMode ​

iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'

获取或设置 iOS 上的图标渲染模式。**仅限 iOS**。

默认为 automatic。

参见 UIImage.RenderingMode。

…继承的 ​

有关其他继承属性，请参阅 API 参考。

TabViewItem 属性 ​

title ​

title: string

获取或设置选项卡栏条目的标题。

textTransform ​

textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"

获取或设置文本转换。

参见 TextTransformType。

默认为 initial。

iconSource ​

iconSource: string

获取或设置选项卡栏条目的图标源。

支持的路径为 res://、font:// 或绝对路径（例如 ~/assets/image.png）。

有关不同路径的详细信息，请参阅 Image。

事件 ​

selectedIndexChange ​

on('selectedIndexChanged', (args: EventData) => {
  const tabView = args.object as TabView
  console.log('TabView selectedIndex:', tabView.selectedIndex)
})

当选定的选项卡更改时发出。

原生组件 ​

• Android: androidx.viewpager.widget.ViewPager
• iOS: UITabBarController