c-tab

属性

属性名 类型 必填 默认值 说明
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>
wx
web
native

查看完整示例

results matching ""

    No results matching ""