1.5.1 • Published 1 year ago
@wines/tabbar
TabBar 标签栏
标签栏用于在不同功能模块之间进行切换，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "TabBar",
"usingComponents": {
"wux-icon": "@wines/icon",
"wux-badge": "@wines/badge",
"wux-tabbar": "@wines/tabbar",
"wux-tabbar-item": "@wines/tabbar/item"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">TabBar</view>
<view class="page__desc">标签栏</view>
</view>
<view class="page__bd">
<view class="sub-title">Default</view>
<wux-tabbar defaultCurrent="tab2">
<wux-tabbar-item key="tab1" title="Tab 1">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item key="tab2" title="Tab 2">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item key="tab3" title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
<view class="sub-title">Theme = positive</view>
<wux-tabbar defaultCurrent="1" theme="positive">
<wux-tabbar-item title="Tab 1">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 2">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
<view class="sub-title">Disabled</view>
<wux-tabbar defaultCurrent="1">
<wux-tabbar-item title="Tab 1">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 2" disabled>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
<view class="sub-title">Controlled</view>
<wux-tabbar controlled current="{{ current }}" bindchange="onChange">
<wux-tabbar-item title="Tab 1">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 2">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
<view class="sub-title">With Badge</view>
<wux-tabbar
defaultCurrent="1"
position="bottom"
safeArea
backgroundColor="#000"
>
<wux-tabbar-item title="Tab 1">
<wux-badge count="1" slot="icon-on">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
<wux-badge count="1" slot="icon-off">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 2">
<wux-badge dot slot="icon-on">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
<wux-badge dot slot="icon-off">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
</view>
</view>
import './index.less';
Page({
data: {
current: '1',
},
onChange(e) {
console.log('onChange', e);
this.setData({
current: e.detail.key,
});
},
});
API
TabBar props
| 参数 | 类型 | 描述 | 默认值 |
|---|
| 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 | 切换面板的回调函数 | - |
TabBar externalClasses
TabBarItem props
| 参数 | 类型 | 描述 | 默认值 |
|---|
| prefixCls | string | 自定义类名前缀 | wux-tabbar-item |
| key | string | 对应 key | - |
| title | string | 选项卡标题 | - |
| disabled | boolean | 是否禁用 | false |
| bind:click | function | 点击事件 | - |
TabBarItem slot
| 名称 | 描述 |
|---|
| - | 自定义标题 |
| icon-on | 自定义默认展示图标 |
| icon-off | 自定义选中后的展示图标 |
TabBarItem externalClasses