alita-layout

The generic h5 layout in umi uses antd-mobile.

umi@2 和 alita@1 请使用1.x版本 2.x版本只支持umi@3和alita@2

使用

npm i @alitajs/alita-layout --save
// or
yarn add @alitajs/alita-layout
import BasicLayout from '@alitajs/alita-layout';

render(<BasicLayout />, document.getElementById('root'));

API

所有参数说明

属性 类型 必填 默认值 描述
tabBar TabBarProps 定义页面切换页信息,api参考微信小程序
documentTitle string 定义项目的默认title
titleList TitleListItem[] 定义所有页面的title
navBar NavBarProps 定义头部导航信息

tabBar 参数说明

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
position string bottom tabBar 的位置,仅支持 bottom / top
tabsGroup string[][] 当一个项目需要多个 TabBar 时配置

tabsGroup 仅仅标记 tab 分组,是否是 tab 页面,和其他参数依旧在 list 中配置

比如有四个页面是 tab 页面,你先不管他们如何分组,全部按照 list 的配置,写到 list 里

const tabList: TabBarListItem[] = [
  {
    pagePath: '/',
    title: '首页',
    ...
  },
  {
    pagePath: '/list',
    title: '列表',
    ...
  },
  {
    pagePath: '/settings',
    title: '设置',
    ...
  },
  {
    pagePath: '/show',
    title: '展示',
    ...
  },
];

然后再将他们进行分组,比如将首页和列表分为一组,当访问首页的时候,底部 TabBar 会有首页和列表两个切换项。

const tabBar: TarBarProp
  list: tabList,
  tabsGroup: [['/','/list'],['/setting','/show']]
};

list 参数说明

属性 类型 必填 说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,当 position 为 top 时,不显示 icon。
selectedIconPath string 选中时的图片路径,当 position 为 top 时,不显示 icon。
iconSize string 0.44rem
badge string badge
onPress function 点击事件
title string 定义页面标题

关于页面标题,声明权重如下: titleList > list.title > list.text > documentTitle > ''

属性 说明 类型 默认值
mode 模式 string 'dark' enum{'dark', 'light'}
icon 出现在最左边的图标占位符 ReactNode 不在tabsBar的页面,会有默认左侧回退图标
leftContent 导航左边内容 any
rightContent 导航右边内容 any
onLeftClick 导航左边点击回调 (e: Object): void 有左侧回退图标的默认事件是返回上一页
navList 单独设置某些页面的navbar NarBarListItem
hideNavBar 隐藏NavBar,默认有NarBar boolean false
fixed NavBar固定在页面头部 boolean false
pageBackground 页面的背景颜色 string '#FFF'
pageTitle 页面标题 string 无,优先级最高
属性 说明 类型 默认值
pathName 路由名称 string
navBar 当前路由的navBar NavBarProps