<view
  class="ant-tab-bar {{className || ''}}"
  style="{{style || ''}}"
>
  <view class="ant-tab-bar-wrap">
    <block
      a:for="{{items}}"
      a:for-index="index"
      a:for-item="item"
    >
      <view
        class="ant-tab-bar-item {{index === mixin.value ? 'ant-tab-bar-item-active ' + (activeClassName || '') : ''}}"
        style="{{index === mixin.value ? activeStyle || '' : ''}}"
        onTap="onChange"
        data-index="{{index}}"
      >
        <ant-badge
          a:if="{{item.badge}}"
          type="{{item.badge.type || 'dot'}}"
          text="{{item.badge.text}}"
          stroke="{{item.badge.stroke}}"
          bgColor="{{item.badge.bgColor}}"
          position="{{item.badge.position || 'top-right'}}"
          offsetX="{{item.badge.offsetX || '-9px'}}"
          offsetY="{{item.badge.offsetY || '0px'}}"
        >
          <slot
            name="icon"
            active="{{mixin.value == index}}"
            item="{{item}}"
            index="{{index}}"
          >
            <image-icon
              className="ant-tab-bar"
              image="{{mixin.value === index ? item.activeIcon : item.icon}}"
            ></image-icon>
          </slot>
        </ant-badge>
        <block a:else>
          <slot
            name="icon"
            active="{{mixin.value == index}}"
            item="{{item}}"
            index="{{index}}"
          >
            <image-icon
              className="ant-tab-bar"
              image="{{mixin.value === index ? item.activeIcon : item.icon}}"
            ></image-icon>
          </slot>
        </block>
        <view class="ant-tab-bar-text-wrap">
          <slot
            name="text"
            active="{{mixin.value === index}}"
            item="{{item}}"
            index="{{index}}"
          >
            <!--display: inline-->
            <text class="ant-tab-bar-text">{{item.text}}</text>
          </slot>
        </view>
      </view>
    </block>
  </view>
</view>