<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 }}" />
          </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 }}" />
          </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>