0.1.2 • Published 5 years ago
@beisen-phoenix/mobile-tab-bar v0.1.2
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 |