---
navTitle: 条件样式
---
# 条件样式

在仪表板中可以通过条件样式来标注符合规则的组件或动态更改表格单元格的外观，例如：

- 使用红色文字标注表格中同比增幅小于10%的省份
- 使用不同的图标标注表格中的计划完成情况，绿色图标表示完成度超过90%

也可以使用状态样式来实现鼠标悬停、选中、按下等状态效果，例如：

- 鼠标滑动到按钮或KPI上时有阴影效果
- 选中标签页的选项后有高亮效果

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

仪表板中设置条件样式的入口在左侧属性栏的样式栏下，下面在分组表中以具体的操作来展示条件样式的用法：

- 将销售数量使用**数据条**来展示
- 同比则使用**突出显示**来标注，同比大于0时显示为绿色字体和绿色箭头，同比小于0则是红色

关于条件样式的详细介绍可查看[报表条件样式](./condition-style.md)。

![条件样式](./images/2021-08-23-14-11-12.gif)

示例地址：[条件样式](https://demo.succbi.com/v5/bi/%E5%88%86%E7%BB%84%E8%A1%A8\(%E6%8C%89%E6%9C%88%E6%9F%A5%E8%AF%A2%E9%94%80%E5%94%AE%E6%83%85%E5%86%B5\))

1. **选择组件**：选择需要添加条件样式的组件，即分组表
2. **添加条件样式**：在**属性栏-样式-分组表-条件样式**下点击**添加**按钮，添加一个**数据条**的条件样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择`销售数量`
   - **设置样式**：修改正值填充的颜色，并设置宽度为`45%`，设置边框为`无`
   - **重命名**：将条件样式重命名为`数据条`
3. **添加第二个条件样式**：点击设置面板左上角的**添加**按钮，添加一个**突出显示**的条件样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择`同比`
   - **设置规则**：设置规则为**当前值-大于-0**
   - **设置样式**：选择**样式**下的**主题**风格`大于0`
   - **重命名**：将条件样式重命名为`同比大于0`
4. **添加第三个条件样式**：再添加一个**突出显示**的条件样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择`同比`
   - **设置规则**：设置规则为**当前值-小于-0**
   - **设置样式**：选择**样式**下的**主题**风格`小于0`
   - **重命名**：将条件样式重命名为`同比小于0`
5. **保存条件样式设置**：点击对话框中的确定按钮保存当前条件样式设置

## 状态样式介绍{#effect-style}

状态样式的入口同条件样式，下面以添加标签页**选中**的状态样式为例来介绍下具体操作步骤，关于状态样式的详细介绍可查看[SPG的状态样式](../../../../app/superpage/design/style/condition-style.md#use)。

![状态样式](./images/2021-08-23-16-59-50.gif)

示例地址：[状态样式](https://demo.succbi.com/v5/bi/%E7%8A%B6%E6%80%81%E6%A0%B7%E5%BC%8F)

1. **选择组件**：选择需要添加状态样式的组件，即标签页
2. **添加条件样式**：在**属性栏-样式-标签页-条件样式**下点击**添加**按钮，添加一个**选中**的状态样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择即为当前`标签页`
   - **设置样式**：选择样式风格`选中-圆角`
3. **保存条件样式设置**：点击对话框中的确定按钮保存当前条件样式设置

## 支持使用条件样式和状态样式的组件{#arrange}

组件|状态样式|条件样式|
-|-|-|
表格|不支持|突出显示、最前最后、数据条、步进器、色阶、图标集
图形（除地图和图标条外）|选中、悬停、按下|突出显示
输入-下拉框、输入框、日期、快速搜索|不支持|突出显示
输入-选择面板、标签页|选中、悬停、按下|突出显示
更多-按钮|选中、悬停、按下、禁用|突出显示