---
order: 10
navTitle: 显示组件
---
# SuperPage交互-显示/隐藏组件

**显示组件**交互用于显示被隐藏的组件，与**隐藏组件**交互组合使用，可以实现动态显示与隐藏效果。如搜索企业名称，当企业名称不为空时，显示统一社会信用代码，否则不显示：

![显示组件](./images/show-component.gif)

示例地址：[显示隐藏组件交互](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92)

## 使用显示组件{#show-component}

使用**显示组件**交互，搭配**隐藏组件**交互，根据不同的[启用条件](./README.md#condition)，可以实现组件的动态显示。以搜索企业名称为例，企业名称不为空，则显示统一社会信用代码，具体步骤如下：

![操作步骤](./images/show-component1.gif)

1. **添加需要显示的组件：** 在页面中添加[面板](superpage/component/panel)组件，如`面板20`，并在面板中添加两个[文本](../../components/common/text.md)组件，用于显示信用代码信息
2. **添加交互并设置属性：** 选中`企业名称`的[快速搜索](../../components/input/searchbox.md)框
   1. 添加**显示组件**交互，**生效条件**设为`条件`，**启用条件**为`[企业名称：] is not NULL`，同时将**目标组件**选择上方加入的`面板20`
   2. 同理，添加**隐藏组件**交互，设置**启用条件**为`[企业名称：] is NULL`，并将目标组件选择`面板20`即可

## 切换显示和隐藏{#switch}

**显示组件**交互除了与**隐藏组件**交互组合使用，实现组件动态显示效果之外，只利用**显示组件**交互也可以实现动态显示效果。需要在**显示组件**交互中勾选**切换显示和隐藏**属性，勾选后，无论组件的初始状态为显示或隐藏，每[触发事件](./README.md#trigger)发生一次，就可动态切换一次状态。如下图所示：

![切换显示和隐藏](./images/show-component2.gif)

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

## 使用隐藏组件{#hide-component}

**隐藏组件**交互的用法与**显示组件**交互一致，但作用相反，具体使用可查看[使用显示组件](#show-component)交互。