---
order: 1
navTitle: 面板
---
# 仪表板组件-面板

面板是用于放置其它组件的布局组件，可以任意组合组件形成一个数据卡片。如展示全国的折扣率以及相关指标内容：

![示例](./images/2020-05-22-17-13-14.png)

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

面板操作步骤如下：

![操作](./images/2023-04-18-11-34-32.gif)

1. **选择面板组件：** 将**布局**>**面板**组件拖入到画布中
2. **将组件拖入到面板中：** 将环形占比图，文本组件和KPI组件分别从组件区拖入到面板中，并根据拖入组件所展示内容进行适当位置调整：
   - 环形占比图的取数和样式设置参考[环形占比图](../chart/percentring.md)文档
   - KPI取数参考[KPI](../chart/kpi.md)文档
   - 文本组件设置参考[文本](../more/text.md)

## 属性介绍{#properties}

### 网格{#grid}

布局组件内部是由一个个“网格”组成的，行数和列数决定了有多少个“网格”，网格的尺寸决定了仪表板组件移动的最小值。可以理解为在仪表板组件不脱离网格前提下，使用鼠标移动仪表板组件一次的距离就是一个“网格”的距离。

布局组件的网格同画布网格的设置及功能是一致的，用于设置组件内的行数和列数，以及行列间距，从而达到布局的功能。网格的设置可以在面板组件的**样式**>**网格**中进行设置，具体操作可以参考[布局组件](./README.md)文档。

![网格](./images/2020-05-22-17-34-23.png)

### 条件样式{#condition-style}

当面板自身需要标注或者动态改变外观时，可在**样式**>**组件**处设置条件样式，如突出显示、悬停、选中和按下。具体操作可参考[条件样式](../../design/type/condition-style.md)文档。