bottom-navigation
安装
npm i -S @beisen-phoenix/mobile-tab-bar
or
yarn add @beisen-phoenix/mobile-tab-bar
由以下几个子组件构成, 注意: 相同类型的容器组件必须使用对应的Item组件
TabBar.DefaultTabBar 容器组件 // 简版模式
TabBar.DefaultTabBarItem // 简版模式
TabBar.AppTabBar 容器组件 // App模式,支持icon
BottomNav.AppTabBarItem 单个组件
TabBar.DefaultTabBar/ TabBar.AppTabBar API
name | description | type | default |
---|---|---|---|
style | 样式 | object | |
className | 扩展classname | string | |
children | 内容 | any | |
fixedBottom | 是否固定到底部 | boolean | false |
homeIndicator | 是否适配X系列的homeIndicator(34px) | boolean | false |
TabBar.AppTabBar API
name | description | type | default |
---|---|---|---|
title | 标题 | string | |
style | 样式 | object | |
onClickItem | 点击事件 | Function |
TabBar.AppTabBar API
name | description | type | default |
---|---|---|---|
title | 标题 | string | |
style | 样式 | object | |
selected | 是否被选中 | boolean | |
selectedIcon | 选中的图标颜色 | string | |
icon | 图标 | ReactElement/url | |
badge | 右上角徽标 | number | |
dot | 提醒 | boolean | false |
onClickItem | 点击事件 | Function |