综述

通用页头。

REACT 组件，所引项目需要支持 LESS 且内置 material-ui 。

npm i @mui/material @emotion/react @emotion/styled -S

npm i @mui/icons-material -S

安装

当前组件仓库内包含示例，克隆至本地 && 运行之前, 请确保已全局安装 gaoge-cli 脚手架:

npm i @gaoges/gaoge-cli -g

git clone https://gitee.com/gaoge2/gui-page-header.git

cd gui-page-header

gaoge start

安装:

npm i @gaoges-ui/gui-page-header

API

PageHeader属性

| 属性名 | 中文名 | 属性描述 | 数据类型 | 默认值 | 必选/可选 | 备注 | | ----------- | ------------ | ----------------- | ------------------------- | ------- | --------- | -------- | | className | 节点选择器 | | string | | 可选 | | | title | 标题 | | string | | 必选 | | | subTitle | 副标题 | | string | | 可选 | | | ghost | 设置白底 | 组件配置背景颜色 | boolean | false | 可选 | 默认透明 | | tags | 标签 | | TagProps[] | | 可选 | | | extra | 自定义操作区 | 位于 title 行尾 | ReactNode | | 可选 | | | avatar | 头像 | | AvatarProps | | 可选 | | | menuModel | 下拉框 | 位于 title 行尾 | {text, icon, MenuPeops} | | 可选 | | | crumbs | 面包屑 | 位于组件顶部 | {children, path}[] | | 可选 | | | children | 子组件 | 位于组件底部 | ReactNode | | 可选 | |

PageHeader事件回调

| 方法名 | 方法描述 | 数据类型 | 备注 | | -------- | ------------------ | ------------ | --------------------------------------------- | | onBack | 后退按钮的点击事件 | () => void | 配置该方法后会显示后退按钮，位于 title 首部 |

PageHeader.Provider属性

| 属性名 | 中文名 | 属性描述 | 数据类型 | 默认值 | 必选/可选 | 备注 | | ------------- | -------- | ------------------------------------- | ---------------- | ------------------ | --------- | --------------------------------------------- | | useLocation | 路由监听 | react-router-dom的useLocation方法 | string | () => {pathname} | 必选 | 用于将组件的面包屑与项目路由关联 | | routeList | | 各节点地址对应文本集合 | {path, name}[] | | 必选 | | | children | 子组件 | | ReactNode | | 必选 | PageHeader.Provider组件需要嵌套PageHeader |