---
order: 5
navTitle: 多页面板
---
# SuperPage组件-多页面板

多页面板用于多页面展示相关业务，可以配合标签页组件动态切换显示面板页面，每个面板页面都可以任意组合布局，功能与[面板](superpage/component/panel)相同。如下示例：

![多页面版示例](./images/2020_10_15_14_21_20_838.gif)

示例地址：[多页面板](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%A4%9A%E9%A1%B5%E9%9D%A2%E7%89%88)

## 使用多页面板组件{#start}

多页面板可以添加多个页面，使用时需要在各页面添加相应的内容，并使用标签页或下拉框等组件设置交互以实现页面的切换。以标签页为例，如下是操作步骤：

![使用组件](./images/2020_10_15_14_48_49.gif)

1. **使用多页面板组件**：在**组件区**>**布局**中将**多页面板**组件拖入到画布中
2. **添加面板页面**：多页面板默认提供了两个面板页，由于此时需要三个页面，所以在左上角的下拉列表中选择**添加**一个页面
3. **在每个面板页面填充内容**：在多页面板组件左上角的下拉列表中切换页面，为每个页面设置内容，可以参考[面板](superpage/component/panel)
4. **使用标签页组件切换多页面板**：选中标签页，在**交互**中添加**切换多页面板**，目标对象选择该多页面板，目标面板选择**事件源序号**。具体的使用方法可参考[标签页](../navigation/tabbar.md)

## 切换多页面板交互{#switch-panelbook}

多页面板组件配合[标签页](../navigation/tabbar.md)、[下拉框](../input/combobox.md)组件以及**切换多页面板**交互，可以实现多页面板中子页面的动态切换，具体交互设置可查看[切换多页面板交互](../../design/action/switch-panelbook.md)。

## 属性介绍{#attribute}

### 默认页{#defaultpage}

默认页，即第一次查看时显示的面板页面。可以设置某个具体的面板页面为默认页，也可以动态设置默认面板页面。选中多页面板组件，按一次ESC键，在**多页面板**>**默认页**中设置。有两种类型的设置方式：

- **选择固定值**：即选择固定的页面，如panel1
- **动态显示默认面板**：即选择**条件**，在弹出的对话框中编辑表达式，一般配合用户使用。例如根据用户所在用户组决定显示的页面，表达式为`IF(USER_INGROUP('anonymous),'panel1','panel2')`，表示若用户属于匿名用户，则显示panel1，否则显示panel2

![默认页](./images/2020-10-14-14-23-04.png)

### 名称{#name}

单个面板页面的名称，唯一标识该页面，不能重复。名称支持重命名，按ESC键弹出多页面板页面的管理菜单，切换到需要修改名称的面板页面，在**面板**>**名称**中重命名。

![名称](./images/2020-10-14-14-34-19.png)

### 面板页面管理{#manage}

在多页面板页面管理菜单中可以添加，删除，移动和复制面板页面，也可以重命名面板页面名称。选中多页面板，在多页面板组件的左上角菜单中进行相关操作。

![页面管理](./images/2020-10-16-17-09-22.png)

- **添加**：添加新的面板页面。点击菜单中的添加按钮，即可添加一个新的面板页面。新的面板页面的命名是根据系统中生成的页面顺序自动在panel后面加1，且名称是当前面板中唯一的。
- **重命名**：快捷修改页面的名称。点击重命名按钮，即可修改该页面的名称，名称唯一不可重复。
- **复制**：复制当前选中的页面。复制的页面名称是根据系统中生成的页面顺序自动在panel后面加1，且名称是当前面板中唯一的，并排序在当前所有页面的最后。复制出来的面板页面内容是一致的，修改互不影响。
- **删除**：删除选中的页面。点击需要删除页面后面的删除按钮，即可删除当前选中的页面，可以通过撤销键撤销此操作。
- **移动**：在多页面板的页面管理菜单下拉框中，选中页面并使用鼠标左键进行拖拽，将其移动到期望位置。

#### 操作小技{#tips}

**如何将多页面板1的内容快速复制到多页面板2中？**

1. 按住Ctrl键，鼠标左键将多页面板1中待复制内容拖拽到外层容器中
2. 切换到多页面板2，鼠标左键将已经复制好的内容拖到多页面板2中即可

:::tip

当多页面板被组件占满时，选中该组件，按一次ESC键进入到多页面板的页面管理菜单，再按一次ESC键即可进入到多页面板的默认页编辑处。

:::