UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

110 lines (92 loc) 4.75 kB
--- nav: path: /components group: title: 导航 order: 6 toc: 'content' --- # TabBar 底部导航栏 用于在不同页面之间进行切换。 ## 引入 在 `index.json` 中引入组件 ```json "usingComponents": { #if ALIPAY "ant-tab-bar": "antd-mini/es/TabBar/index" #endif #if WECHAT "ant-tab-bar": "antd-mini/TabBar/index" #endif } ``` ## 代码示例 ### 基本使用 ```xml <ant-tab-bar items="{{tabs}}" /> <ant-tab-bar items="{{tabs}}" activeStyle="color:red;" /> #if ALIPAY <ant-tab-bar items="{{tabs}}" current="{{current}}" onChange="handleChange" /> #endif #if WECHAT <ant-tab-bar items="{{tabs}}" current="{{current}}" bindchange="handleChange" /> #endif ``` ```js Page({ data: { tabs: [ { icon: 'AlipayCircleFill', activeIcon: 'AlipayCircleFill', text: 'homr', }, { icon: 'StarOutline', activeIcon: 'StarFill', text: 'favor', }, { icon: 'HeartOutline', activeIcon: 'HeartFill', text: 'like', }, ], current: 0, }, handleChange(index) { console.log(index); }, }); ``` ### Demo 代码 <code src='../../demo/pages/TabBar/index'></code> ## API | 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------- | ----------------------- | ------ | | activeClassName | 选项卡激活类名 | string | - | | activeStyle | 选项卡激活样式 | string | - | | className | 类名 | string | - | | current | 选中项 | number | - | | defaultCurrent | 初始选中项 | number | 0 | | icon | 选项卡图标作用域插槽,接收 item、index、active 参数 | slot | - | | items | 底部图标配置 | [TabItem](#tabitem)[] | [] | | style | 样式 | string | - | | text | 选项卡底部文字作用域插槽,接收 item、index、active 参数 | slot | - | | #if ALIPAY onChange | Tab 切换时触发回调 | `(index: number) => void` | - | | #if WECHAT bindchange | Tab 切换时触发回调 | `(index: number) => void` | - | ### TabItem | 参数 | 说明 | 类型 | 默认值 | | ---------- | -------------------------------------------------- | ------ | ------ | | icon | 底部图标,支持 [Icon](./Icon) 或图片地址 | string | - | | activeIcon | 激活状态的底部图标,支持 [Icon](./Icon) 或图片地址 | string | - | | text | 底部文字 | string | - | | badge | 徽标类型,参见 [Badge](./Badge) 组件 | object | - | ### 主题定制 #### 样式变量 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。 | 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 | | --------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------- | | --tabbar-bg | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | TabBar 背景颜色 | | --tabbar-item-color | <div style="width: 150px; height: 30px; background-color: #666666; color: #ffffff;">#666666</div> | <div style="width: 150px; height: 30px; background-color: #808080; color: #ffffff;">#808080</div> | TabBar 条目颜色 | | --tabbar-active-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | TabBar 激活颜色 |