Chameleon 变色龙

# c-tab

wx
web
native

# 属性

属性名 类型 必填 默认值 说明
tabs Array 是 [] tabs显示内容数组，tabs中数组中具体的值请看tabs详情
active-label String 是 tabs数组中的某一个label的值 注意必须和tabs数组中某一个label的值相等
inline Boolean 否 true 代表每一个tab栏的 前置icon + tab内容 + 后置icon 的排列方向，默认水平排列
line-style String 否 '' 标识tab栏的下划标志线的样式
active-label-style String 否 "color:#FC9153" 标识tab栏激活后的文案的样式
has-underline Boolean 否 true 是否需要下划线
active-icon-style String 否 '' label前缀icon或者后缀icon激活后的样式

# 事件

事件名 描述 事件参数中detail对象
tabclick 点击每个tab时候出发的事件名称 label:表示激活tab的文案,activeIndex:表示激活tab的索引

# tabs 数组具体属性详情

属性名 类型 必填 默认值 说明
label String 是 tabs数组中的某一个label的值 注意必须和tabs数组中某一个label的值相等
labelStyle String 否 外部传入控制每一个tab栏的文案样式
prefixStyle String 否 外部传入控制每一个tab栏的前缀样式
suffixStyle String 否 外部传入控制每一个tab栏的后缀样式

# c-tab-pane

# 属性

属性名 类型 必填 默认值 说明
tabs Array 是 [] tabs显示内容数组，tabs中数组中具体的值请看tabs详情
active-label String 是 tabs数组中的某一个label的值 注意必须和tabs数组中某一个label的值相等

注意，如果 c-tab-pane 组件配合 c-tabs 组件使用，那么二者的 tabs 和 active-label 属性必须引用同一个值；每个 c-tab-pane 组件下，同时对应一个 c-tab-pane-item 组件；

# c-tab-pane-item

用于提供一个可以容纳每个 pane 的容器,宽度 750cpx;

# 示例

<template>
  <view>
    <!-- 单tab测试 -->
    <view class="title">
      <text>单tab案例</text>
    </view>
    <c-tab
      tabs="{{tabsAlone}}"
      c-bind:tabclick="handleTabTapAlone"
      active-label="{{activeLabelAlone}}"
      inline="{{false}}"
    >
    </c-tab>
    <view class="title">
      <text class="title">tab+pane案例</text>
    </view>
    <c-tab
      tabs="{{tabs}}"
      c-bind:tabclick="handleTabTap"
      active-label="{{activeLabel}}"
      inline="{{false}}"
    >
    </c-tab>
    <c-tab-pane tabs="{{tabs}}" active-label="{{activeLabel}}">
      <!-- 案例1 -->
      <!-- 
      <c-tab-pane-item c-for="{{tabs}}" >
      <slot><text>{{item.label}}</text></slot>
      </c-tab-pane-item> 
      -->

      <!-- 案例2 -->
      <c-tab-pane-item>
        <view class="one">
          <text>1</text>
        </view>
      </c-tab-pane-item>
      <c-tab-pane-item>
        <view class="two">
          <text>2</text>
        </view>
      </c-tab-pane-item>
      <c-tab-pane-item>
        <view class="three">
          <text>3</text>
        </view>
      </c-tab-pane-item>
      <c-tab-pane-item>
        <view>
          <text>4</text>
        </view>
      </c-tab-pane-item>
    </c-tab-pane>
  </view>
</template>
<script cml-type="json">
{
  "base": {
      "usingComponents": {
          "c-tab": "cml-ui/components/c-tab/c-tab",
          "c-tab-pane": "cml-ui/components/c-tab-pane/c-tab-pane",
          "c-tab-pane-item": "cml-ui/components/c-tab-pane-item/c-tab-pane-item"
      }
  }
}
</script>

← c-picker →