---
order: 9
navTitle: 最大化
---
# SuperPage交互-最大化

使用**最大化**交互，可以将目标组件全屏显示。如下点击**单级菜单**按钮选择**放大**，[列表](../../components/data/list.md)组件在浏览器页面全屏显示，按**ESC**或者点击**右上角关闭按钮**退出全屏：

![最大化](./images/maximize1.gif)

示例地址：[按钮](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E6%8C%89%E9%92%AE)

## 使用最大化{#maximize}

**最大化**交互通常搭配[按钮](../../components/common/button.md)或者[菜单](../../components/common/menu.md)组件使用，比如设置了**最大化**交互的菜单项可以让列表在浏览器内全屏显示，如下动图所示：
![使用最大化](./images/maximize2.gif)

1. **添加菜单项并添加交互**：标题设置为`放大`，添加**最大化**交互
2. **设置该交互属性**：属性栏中，目标组件选择`列表2`

## 设置全屏属性{#fullscreen}

当需要目标组件占满**整个屏幕**，勾选**全屏**属性即可实现。如果不勾选，目标组件在**浏览器界面**全屏显示，仍然会显示浏览器url地址栏。全屏后的内容，可以**按ESC**或者点击右上角的关闭按钮退出全屏

## 对话框组件最大化按钮{#dialog}

拖入一个新的[对话框](../../components/embed/dialog.md)组件，编辑界面默认提供了**最大化**按钮，与单独为某个组件设置最大化的区别是：

- 不用选择**目标组件**，会自动放大当前对话框
- 勾选**全屏**属性，对话框也仅在**浏览器页面**全屏显示
- 最大化后，点击**右上角的最大化按钮**会退出最大化，若按**ESC**会直接关闭当前对话框，之后再次弹出对话框仍然为全屏模式，刷新浏览器后再次弹出对话框则为默认大小