mpx-cube-ui

# Cube-Tab-Bar

# 介绍

选项卡。

# 示例

# 基础用法

支持默认的点击高亮效果，又支持下划线跟随的效果，并且支持自定义的插槽，实现icon与label搭配的类似于app底部选项卡的样式。

  • 默认样式

传入如下 tabs 的数据结构便能初始化 cube-tab-bar，必须使用 wx:model 指令来选中对应的 tab， wx:model 的参数的值必须与某一项 tab 的 value 属性对应，icon 属性是用做于 class 选择器，一般是用字体图标样式，cube-tab-bar 在不同的时机派发 click 与 change 事件，参数则是每次选中的 tab 对应的 value 值。

收起 
<template>
  <cube-tab-bar
    wx:model="{{selectedLabelDefault}}"
    wx:model-prop="value"
    tabs="{{tabs}}"
    bindclick="clickHandler"
    bindchange="changeHandler"
  >
  </cube-tab-bar>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data: {
      selectedLabelDefault: 'Home',
      tabs: [{
        label: 'Home',
        value: 'Home',
        icon: 'home'
      }, {
        label: 'Like',
        value: 'Like',
        icon: 'like'
      }, {
        label: 'User',
        value: 'User',
        icon: 'user'
      }, {
        label: 'Star',
        value: 'Star',
        icon: 'star'
      }]
    },
    methods: {
      clickHandler (label) {
        console.log('tab was clicked', label)
      },
      changeHandler (label) {
        console.log('value has changed, now is', label)
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 自定义插槽

实际上我们更常见的需求是图标搭配文字效果，因此 cube-tab-bar 组件也支持了插槽的使用方式， 注意必须搭配 cube-tab 组件作为第一层级的子组件，来包裹你自定义插槽。

注意：由于转小程序不支持插槽默认值，所以需要传递customize-content和customize-icon来分别开启默认插槽和icon插槽。

收起 
<template>
  <cube-tab-bar
    wx:model="{{selectedLabelSlotsOnly}}"
    wx:model-prop="value"
    bindclick="clickHandler"
    bindchange="changeHandler"
    customize-content
    tabs="{{tabs}}"
  >
    <cube-tab
      class="cube-tab"
      wx:for="{{tabs}}"
      wx:key="label"
      label="{{item.label}}"
      value="{{item.value}}"
      customize-content
      customize-icon
    >
      <cube-icon type="{{item.icon}}"/>
      <!-- use en empty tag to replace default slot -->
      <text></text>
    </cube-tab>
  </cube-tab-bar>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Props

参数 说明 类型 可选值 默认值
value 双向绑定属性值 Number - 0
tabs 用于 cube-tab-bar 渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 label、icon 和 value，如果使用自定义插槽，也需要传递此值 Array - []
inline 文字与图标是否显示在一行 Boolean true/false false
showSlider 是否开启下划线跟随效果 Boolean true/false false
useTransition 是否开启 transition 过渡 Boolean true/false true
customizeContent 是否需要自定义默认插槽 Boolean true/false false

# Events

事件名 说明 参数
click - -
eventType - -

# Slots

插槽名 说明
— (默认插槽) 自定义内容

# CSS Variable

变量名 默认值 含义
$tab-color
#666
 选项卡颜色
$tab-active-color
#e8864c
 选项卡激活项颜色
$tab-slider-bgc
#e8864c
 下划线颜色

← Checkbox 复选框 →