1.0.6 • Published 3 years ago
@gaoges-ui/gui-page-header v1.0.6
综述
通用页头。
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 |