@wines/tabbar

TabBar 标签栏

标签栏用于在不同功能模块之间进行切换，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

$3

``json
{
"navigationBarTitleText": "TabBar",
"usingComponents": {
"wux-icon": "@wines/icon",
"wux-badge": "@wines/badge",
"wux-tabbar": "@wines/tabbar",
"wux-tabbar-item": "@wines/tabbar/item"
}
}
`

示例

`xml


TabBar
标签栏


Default


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


Theme = positive


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


Disabled


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


Controlled


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>


With Badge
defaultCurrent="1"
position="bottom"
safeArea
backgroundColor="#000"
>

















wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>






`

`ts
import './index.less';

Page({
data: {
current: '1',
},
onChange(e) {
console.log('onChange', e);
this.setData({
current: e.detail.key,
});
},
});
`

API

$3

| 参数 | 类型 | 描述 | 默认值 |
| --------------- | ---------- | ------------------------------------------------------------------------------------------- | ---------- |
| prefixCls | string | 自定义类名前缀 | wux-tabbar |
| defaultCurrent | string | 默认激活 tab 面板的 key，当 controlled 为 false 时才生效 | - |
| current | string | 用于手动激活 tab 面板的 key，当 controlled 为 true 时才生效 | - |
| controlled | boolean | 是否受控 说明文档 | false |
| theme | string | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced |
| backgroundColor | string | 背景色 | #fff |
| position | string | 标签栏位置，可选值为 bottom、top | - |
| safeArea | boolean | 是否适配 iPhoneX，当 position 为 bottom/top 时才生效 | false |
| bind:change | function | 切换面板的回调函数 | - |

$3

| 名称 | 描述 |
| --------- | ------------ |
| wux-class | 根节点样式类 |

$3

| 参数 | 类型 | 描述 | 默认值 |
| ---------- | ---------- | -------------- | --------------- |
| prefixCls | string | 自定义类名前缀 | wux-tabbar-item |
| key | string | 对应 key | - |
| title | string | 选项卡标题 | - |
| disabled | boolean | 是否禁用 | false |
| bind:click | function` | 点击事件 | - |

$3

| 名称 | 描述 |
| -------- | ---------------------- |
| - | 自定义标题 |
| icon-on | 自定义默认展示图标 |
| icon-off | 自定义选中后的展示图标 |

$3

| 名称 | 描述 |
| --------- | ------------ |
| wux-class | 根节点样式类 |