# 页头

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183669605206188096`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/导航类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 页头

## 一、功能背景及价值用途

为满足工作流程、待办等模块的前端页面的搭建需求，页头组件已经改造为容器，支持和其他组件配合使用，如选项卡、check框、搜索

## 二、功能概述

(1)

目前有两种布局供选择：

默认布局是左侧内容区、右侧内容区都在平铺按钮左侧；（如果设置了多个平铺按钮，则内容区在第一个平铺按钮左侧）；

两侧分布布局：右侧内容区在平铺按钮右侧；（如果设置了多个平铺按钮，则内容区在最后一个平铺按钮右侧）

（1）

可设置左侧内容区是否在标题下方，默认关闭。开启时，如果页头配合选项卡组件使用，隔开标签项和内容区。页头下方的内容区实际显示的是选项卡的标签栏tab，选项卡自己的内容区放到整个页头组件下面。

（2）

可设置左右侧内容区占比，默认为6，可输入大于等于1、小于等于100的数字。输入的数字小于1时自动显示为1，大于100时自动显示为100；

（3）

没有设置按钮时，内容区可显示的宽度=组件宽度-标题-图标；

（4）

没有设置标题、图标时，内容区可显示的宽度=组件宽度-按钮；

（5）

按钮、标题、图标都没有设置时，内容区可显示的宽度=整个组件的宽度；

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/导航类” 分类下选中页头组件，右侧进行详细配置。

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329808221519887&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础配置

#### 2.1、位置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329808221519898&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

仅PC端支持，开启后PC端页头可以实现吸顶效果，同一个页面内，只有一个页头可以吸顶，多个页头吸顶暂不支持。

移动端吸顶效果可以通过固定区域进行配置，可以选择固定在顶部或底部。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329812605501444&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.2、布局

使用两侧分布可以让页头右侧容器与按钮交换位置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329812583596048&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 左侧内容区置于标题下方

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329812494352400&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

####  2.3、配合选项卡特殊布局

开启左侧内容区置于标题下方，而且在左侧容内容区内拖入选项卡后，可以实现搭配选项卡的特殊布局，选项卡的选项将被显示在页头标题下方，容器会被替换为选项卡的容器，选项卡的大部分配置在这个特殊布局下都已经支持。点击页头内的选项卡区域，可以在右侧看到选项卡的相关配置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329816861786126&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

配合选项卡的特殊布局页头内支持配置固定在顶部，开启后，选项卡的选项和页头标题共同组成标题区，固定在页面顶部

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329816783028240&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.4、占比

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329821123198977&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

通过占比可以调整左右两侧区域在整个页头中所占的比例，但是这里并不是调整的容器的占比，左侧包括标题与左侧容器，右侧包括按钮与右侧容器

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329821094772758&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

## 四、上下游关联功能点

事件动作相关配置可参考以下链接：

[ _https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693_](https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693)
