1.0.6 • Published 3 years ago

@gaoges-ui/gui-page-header v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

综述

通用页头。

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设置白底组件配置背景颜色booleanfalse可选默认透明
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-domuseLocation方法string() => {pathname}必选用于将组件的面包屑与项目路由关联
routeList各节点地址对应文本集合{path, name}[]必选
children子组件ReactNode必选PageHeader.Provider组件需要嵌套PageHeader