---
order: 5
navTitle: 菜单
---
# SuperPage组件-菜单

菜单是一系列选项列表，支持配置单级、多级以及带图标的菜单列表。可以与按钮组件组合实现弹出菜单效果，如在PC端和移动端点击按钮弹出菜单会有不同的适配效果：

|PC端|移动端|
|--|--|
|![PC端](./images/menu1.gif)|![移动端](../../design/action/images/mobile-popup-menu.gif)|

示例地址：[菜单](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%BC%B9%E5%87%BA%E8%8F%9C%E5%8D%95)

## 使用菜单组件{#start}

菜单组件通常是由用户的交互触发而显示的，比如点击按钮后显示下拉菜单、右键点击显示菜单等。使用菜单需要两个步骤，包括拖入菜单并配置菜单项内容、配置交互实现弹出菜单。具体步骤如下：

![菜单](./images/menu.gif)

1. **拖入菜单：** 在**组件区**>**常用**分组下将菜单组件拖入到画布中
2. **设置菜单项：** 在**属性栏**>**菜单**>**设置菜单项**中，添加菜单项，并为其设置内容和交互
   - 设置内容：标题为`导出`，设置`导出图标`
   - 设置交互：切换到交互中，添加动作为`导出数据`，并设置数据组件属性为`列表1`
3. **配置弹出菜单交互：** 在按钮中添加**弹出菜单**交互，并在**菜单组件**属性中选择对应的菜单组件`菜单8`即可，更多设置查看[弹出菜单交互](#popupmenu)

:::tip

在预览、查看等界面不能看见菜单组件，所以菜单组件可以位于画布中任意位置且不影响其他组件，建议位于被弹出菜单交互引用的组件附近。

:::

## 弹出菜单交互{#popupmenu}

菜单组件必须配合**弹出菜单**交互使用才能将菜单中设置的内容展示在页面中，才能实现菜单的作用。使用时只需两个步骤：

1. 在对应组件中添加**弹出菜单**交互
2. 在**菜单组件**属性中选择对应的菜单组件

弹出的菜单也能适应手机，效果可见顶部移动端效果动图。在**弹出菜单**>**手机显示**属性中提供了移动端弹出菜单的设置：

![移动设置](./images/2021-03-31-19-01-52.png)

- **悬浮菜单**：从点击的位置以悬浮面板形式显示菜单
- **底部滑出**：从底部滑出，停留在底部，默认为底部滑出，此时可对菜单进行以下设置
  - 自动添加“取消”按钮：勾选后，则在菜单最底部出现取消按钮
  - 菜单标题：在菜单顶部出现菜单标题
  - 顶部描述：在标题下方出现描述信息，支持输入宏

## 属性介绍{#description}

### 菜单设置{#settings}

点击**设置菜单项**，在弹出的编辑对话框中可以设置菜单列表和菜单项。

![设置菜单项](./images/2020-10-14-09-42-27.png)

**菜单列表设置**

在设置菜单项对话框的左侧，可以设置菜单列表。点击**添加**默认在一级菜单尾部添加新的菜单项，名称默认为`菜单项+数字`。菜单列表具体设置如下所示：

- 添加：点击添加或者下拉按钮可以添加新的菜单项或者菜单子项
  - 添加菜单项：点击添加或者下拉按钮可直接添加菜单项
  - 添加菜单子项：在**下拉按钮**>**添加到下级**，选择菜单项，可以添加当前选中菜单项的子项
  - 添加分割线：在**下拉按钮**可以添加分割线，默认添加在菜单项尾部，需要移至菜单项之间，起到分隔菜单项作用
- 搜索：当选项较多时，可以通过搜索按钮输入菜单项标题关键字，能快速找到目标菜单项
- 复制：点击复制按钮可复制菜单项，属性会保持一致
- 删除：点击删除按钮即可删除当前菜单项
- 移动：选中菜单项拖动即可移动菜单项的顺序

**菜单项设置**

选中某个菜单项，在设置菜单项对话框的右侧，可以设置该菜单项的内容和交互。具体属性内容如下：

- 标题：设置弹出菜单中显示菜单项的标题
- 内容：设置菜单项的值
- 图标：设置菜单项标题的图标前缀，可设置颜色
- 显示：设置该菜单项在满足一定条件时是否显示，可使用[表达式](../../../../exp/README.md)
- 启用：设置该菜单项在满足一定条件时是否启用发生交互，可使用[表达式](../../../../exp/README.md)
- 允许勾选：设置菜单项在满足一定条件时是否被勾选，可使用[表达式](../../../../exp/README.md)，勾选后在标题前方会出现`√`的图标。其中**分组**是对菜单项进行分组，当设置相同时，在同一组的菜单项中默认只能勾选一个
- 交互：设置对应菜单项可触发的交互动作，可参考文档[交互](../../design/action/README.md)

### 弹出菜单大小设置{#size}

弹出菜单的大小，默认是根据菜单项个数与标题长度自动调整到合适大小，也可以根据需求手动调整。提供如下属性设置：

![菜单项大小](./images/2020-10-13-17-23-05.png)

- 菜单项高度：默认为自适应，自动根据菜单项个数调整高度，也可以设置固定高度
- 菜单项宽度：默认为自适应，自动根据菜单项标题长度调整宽度，也可以设置固定宽度
- 选项内边距：默认为0，调整弹出菜单上下、左右内边距

## 应用场景{#application}

### 多级菜单{#multistage}

当菜单项较多时，可以按照功能为菜单项分类，显示为树形结构的多级菜单。在**设置菜单项**对话框左侧，选中需要设置下级菜单的菜单项，点击下拉按钮在**添加到下级**中选择菜单项，即可实现树形结构的多级菜单：

![多级菜单](./images/2020-10-15-10-41-34.png)

示例地址：[菜单-多级菜单](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%BC%B9%E5%87%BA%E8%8F%9C%E5%8D%95)

### 动态菜单项{#trends}

菜单项可以设置动态的显示隐藏条件和禁用条件，这样可以动态决定某些菜单是否显示是否可用，例如根据登录用户不同决定某个菜单是否显示。通过设置菜单项的**显示**>**显示条件**属性或者**启用**>**启用条件**属性即可实现。

如勾选一行列表时显示编辑菜单项，设置编辑菜单项的显示条件表达式为`[列表1].[勾选行数] = 1`：

|勾选单行列表菜单项|勾选多行列表菜单项|
|---|---|
|![单行](./images/2020-10-15-10-00-14.png)|![多行](./images/2020-10-15-10-00-52.png)|

示例地址：[菜单-禁用与隐藏](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%BC%B9%E5%87%BA%E8%8F%9C%E5%8D%95)

### 移动底部菜单{#mobile}

当需要在手机上显示菜单时，能以底部滑出的效果显示适应手机。只需将**弹出菜单交互**>**手机显示**属性设置为`底部滑出`即可，更多移动设置可参考[弹出菜单交互](#popupmenu)。

![移动底部菜单](./images/2021-04-01-09-37-26.png)

示例地址：[移动底部菜单](https://demo.succbi.com/v5/demo-spg/mobile/%E5%BC%B9%E5%87%BA%E8%8F%9C%E5%8D%95)