<view
  class="{{classPrefix}} {{icon ? '' : prefix + '-is-bordered'}} {{split ? prefix + '-is-split' : ''}}"
  hover-class="{{classPrefix}}--active"
  hover-stay-time="{{200}}"
>
  <view
    class="{{classPrefix}}__content {{isChecked ? prefix + '-is-checked' : ''}}"
    style="color: {{isChecked ? activeColor : color}}"
    bindtap="toggle"
  >
    <view class="{{classPrefix}}__icon" wx:if="{{icon}}">
      <t-badge
        wx:if="{{badgeProps.dot || badgeProps.count}}"
        count="{{badgeProps.count}}"
        max-count="{{badgeProps.maxCount || 99}}"
        dot="{{badgeProps.dot}}"
        content="{{badgeProps.content}}"
        size="{{badgeProps.size}}"
        visible="{{badgeProps.visible}}"
        offset="{{badgeProps.offset || [0,0]}}"
        t-class-count="{{prefix + '-badge-class'}}"
      >
        <t-icon name="{{icon}}" size="24px" />
      </t-badge>
      <t-icon wx:else name="{{icon}}" size="24px" />
    </view>
    <view class="{{classPrefix}}__text {{icon ? prefix + '-size-s' : ''}}">
      <view class="{{classPrefix}}__icon-menu" wx:if="{{hasChildren}}" />
      <slot />
    </view>
  </view>

  <view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}">
    <view
      class="{{classPrefix}}__spread-item"
      hover-class="{{classPrefix}}__spread-item--active"
      hover-stay-time="{{200}}"
      wx:for="{{subTabBar}}"
      wx:for-item="child"
      wx:for-index="index"
      wx:key="index"
      bindtap="selectChild"
      data-name="{{child.name || index}}"
      >{{ child.label }}
    </view>
  </view>
</view>
