# gui-page-header

**Repository Path**: gaoge2/gui-page-header

## Basic Information

- **Project Name**: gui-page-header
- **Description**: GUI 组件库。
page-header 组件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-31
- **Last Updated**: 2022-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: gaoges-ui包

## README

## 综述

通用页头。

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

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

npm i @mui/icons-material -S
```

## 安装

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

```shell
npm i @gaoges/gaoge-cli -g

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

cd gui-page-header

gaoge start
```

安装:

```shell
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` |