@gaoges-ui/gui-page-header NPM

综述

通用页头。

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

属性名	中文名	属性描述	数据类型	默认值	必选/可选	备注
`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`		可选

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

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