---
order: 8
navTitle: 显示/隐藏组件
---
# 仪表板交互-显示/隐藏组件

**显示/隐藏组件**交互用于实现组件的动态显示与隐藏效果，与SuperPage的[显示/隐藏组件](../../../../app/superpage/design/action/show-component.md)交互效果类似。

![显示/隐藏组件](./images/2023-05-12-16-25-10.gif)

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

使用**显示组件**交互，可以将隐藏的组件显示。根据不同的[启用条件](./README.md#condition)，可以实现组件的动态显示。

![显示组件](./images/2023-05-12-16-50-10.png)

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

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

![切换显示和隐藏](./images/2021-11-25-15-56-49.gif)

**实现方式**

1. **添加组件：** 在页面中添加`显示/隐藏`按钮
2. **添加交互并设置属性：** 选中`显示/隐藏`按钮，添加**显示组件**交互，**目标组件**选择`各价格档次销售情况`面板，勾选**切换显示和隐藏**

![操作步骤](./images/2023-05-12-17-10-10.png)

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

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