TabTitleBar

前提

备注

1. 有局限性

2. 不能设置 disabled,不能改变选中状态的颜色之类的

效果

子组件

无

参数

swiperContent

内容区域

    @Builder
    //定义页签列表关联的页面
    componentBuilder() {
        Column() {
            Text("第一个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#1ABC9C")

        Column() {
            Text("第3个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("red")

        Column() {
            Text("第5个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("black")

        Column() {
            Text("第7个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("blue")

        Column() {
            Text("第9个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")

        Column() {
            Text("第11个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")

        Column() {
            Text("第13个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")
    }

tabItems

上面的选项

  //定义几个左侧的页签项目
private readonly tabItems: Array<TabTitleBarTabItem> =
    [
        { title: '页签1' },
        { title: '页签2' },
        { title: '页签3' },
        { title: 'icon', icon: $r('sys.media.ohos_app_icon') },
        { title: '页签4' },
        { title: '页签5' },
        { title: '页签6' },
    ]

menuItems

图标按钮

  //定义几个右侧的菜单项目
private readonly menuItems: Array<TabTitleBarMenuItem> = [
    {
        value: $r('sys.media.ohos_save_button_filled'),
        isEnabled: true,
        action: () => promptAction.showToast({ message: "on item click! index 0" })
    },
    {
        value: $r('sys.media.ohos_ic_public_copy'),
        isEnabled: true,
        action: () => promptAction.showToast({ message: "on item click! index 1" })
    },
    {
        value: $r('sys.media.ohos_ic_public_edit'),
        isEnabled: true,
        action: () => promptAction.showToast({ message: "on item click! index 2" })
    },
]

属性

无

事件

无

示例

import { promptAction, TabTitleBar, TabTitleBarMenuItem, TabTitleBarTabItem } from '@kit.ArkUI';


@Entry
@Component
struct Index6 {
    //定义几个左侧的页签项目
    private readonly tabItems: Array<TabTitleBarTabItem> =
        [
            { title: '页签1' },
            { title: '页签2' },
            { title: '页签3' },
            { title: 'icon', icon: $r('sys.media.ohos_app_icon') },
            { title: '页签4' },
            { title: '页签5' },
            { title: '页签6' },
        ]
    //定义几个右侧的菜单项目
    private readonly menuItems: Array<TabTitleBarMenuItem> = [
        {
            value: $r('sys.media.ohos_save_button_filled'),
            isEnabled: true,
            action: () => promptAction.showToast({ message: "on item click! index 0" })
        },
        {
            value: $r('sys.media.ohos_ic_public_copy'),
            isEnabled: true,
            action: () => promptAction.showToast({ message: "on item click! index 1" })
        },
        {
            value: $r('sys.media.ohos_ic_public_edit'),
            isEnabled: true,
            action: () => promptAction.showToast({ message: "on item click! index 2" })
        },
    ]

    @Builder
    //定义页签列表关联的页面
    componentBuilder() {
        Column() {
            Text("第一个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#1ABC9C")

        Column() {
            Text("第3个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("red")

        Column() {
            Text("第5个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("black")

        Column() {
            Text("第7个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("blue")

        Column() {
            Text("第9个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")

        Column() {
            Text("第11个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")

        Column() {
            Text("第13个")
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor("#CCFFFFFF")
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("green")
    }

    //TabTitleBar效果展示
    build() {
        Row() {
            Column() {
                TabTitleBar({
                    swiperContent: this.componentBuilder,
                    tabItems: this.tabItems,
                    menuItems: this.menuItems,
                })
            }.width('100%')
        }.height('100%')
    }
}