设置页签的图标出血样式
===========

#### 场景介绍

从6.0.0(20)版本开始，新增支持设置页签的图标出血样式。

[HdsTabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdstabs)容器组件扩展支持出血图标样式。当应用开发者需要tabBar内的页签高度超出tabBar时，可以通过设置对应页签的属性，添加出血效果的自定义组件，图标超出容器部分最大高度为4vp。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c7/v3/WzHmVUULRiKfOBKGvDZbew/zh-cn_image_0000002594828496.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=051D70EC7562472EA570B000881CBBB07B02AA7F54BE85F81A52E0DA38934489)

#### 约束条件

依赖页签栏位于容器底部，barPosition设置为BarPosition.End，vertical设置为false。

#### 开发步骤

1.  导入相关模块。
    
    // 从6.0.2(22)版本开始，无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。
    import { HdsTabs, HdsTabsAttribute, bleedIconStyle } from '@kit.UIDesignKit';
    
2.  创建Hds一级容器组件，设置HdsTabs组件的子组件TabContent的tabBar样式。
    
    @Entry
    @Component
    struct Index {
      build() {
        Stack() {
          HdsTabs() {
            TabContent() {
              Column().width('100%').height('100%').backgroundColor(Color.Yellow)
            }
            .tabBar(bleedIconStyle(() => {
              this.tabBuilder()
            }))
            TabContent() {
              Column().width('100%').height('100%').backgroundColor(Color.Blue)
            }
            .tabBar(this.tabBuilder())
          }
          .vertical(false)
          .barPosition(BarPosition.End)
        }
      }
    
      @Builder
      tabBuilder() {
        Column() {
          Image($r('app.media.startIcon'))
            .width(48)
            .height(48)
            .borderRadius(24)
        }
      }
    }