---
order: 1
navTitle: 条件样式
---
# SuperPage组件的条件样式

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

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

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

- 鼠标滑动到按钮或文字上时有阴影效果
- 选中选项后有高亮效果

条件样式|状态样式|
-|-|
![条件样式](./images/2021-08-16-16-32-50.png)|![状态样式](./images/2021-08-16-16-38-24.gif)|

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

设置条件样式的入口在右侧属性栏的样式栏下，下面在数据列表中以具体的操作来展示条件样式的用法，使用数据条来展示电影时长，使用步进器来展示电影评分。关于条件样式的详细介绍可查看[报表条件样式](../../../../report/design/style/condition-style.md)。

![条件样式](./images/2021-08-16-15-07-24.gif)

示例地址：[条件样式](https://demo.succbi.com/v5/demo-spg/%E5%88%97%E8%A1%A8)

1. **选择组件**：选择需要添加条件样式的组件，即列表
2. **添加条件样式**：在**属性栏-样式-列表-条件样式**下点击**添加**按钮，添加一个**数据条**的条件样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择`电影时长`
   - **设置样式**：修改**正值填充**的颜色，并设置**宽度**为`70%`，设置**边框**为`无`
3. **添加第二个条件样式**：点击设置面板左上角的**添加**按钮，添加一个**步进器**的条件样式
   - **设置作用范围**：下拉选择需要作用的字段，这里选择`评分`
   - **设置样式**：选择**类型**为`连续`，修改图标的**高亮颜色**，并调整**间距**为`2%`，取消勾选**显示字段值**
4. **保存条件样式设置**：点击对话框上的确定按钮保存当前条件样式设置

## 使用状态样式{#use}

状态样式的入口同条件样式，下面以添加按钮悬停、按下的状态样式为例来介绍具体的操作步骤。

![状态样式](./images/2021-08-16-15-41-12.gif)

示例地址：[状态样式](https://demo.succbi.com/v5/demo-spg/%E6%8C%89%E9%92%AE)

1. **选择组件**：选择需要添加状态样式的组件，即按钮
2. **添加状态样式**：在**属性栏-样式-列表-条件样式**下点击**添加**按钮，添加一个**悬停**的状态样式
   - **设置作用范围**：选择**作用范围**为当前按钮，默认即是当前按钮，此处无需修改
   - **设置样式**：在**样式**栏下拉选择主题风格`悬停`
3. **添加第二个状态样式**：点击设置面板左下方的**添加**按钮，添加一个**鼠标按下**的状态样式
   - **设置样式**：在**样式**栏下拉选择主题风格`按下`
4. **保存条件样式设置**：点击对话框上的确定按钮保存当前条件样式设置

## 状态样式设置{#set-up}

设置状态样式的对话框大体分为四个部分，分别时添加状态样式区、作用范围设置区、样式设置区以及预览区，添加的状态样式仅对作用范围内的组件生效。

![状态样式设置](./images/2021-08-16-17-56-28.png)

1. **添加状态样式区**：可以点击添加按钮，添加悬停、按下、选中等五种状态样式，且可以对状态样式进行重命名、复制、删除的操作，详见[添加条件样式](../../../../report/design/style/condition-style.md#add)
2. **作用范围设置区**：设置可应用当前状态样式的组件，当组件包含子项时，如**标签页**，也可设置作用范围为子项
3. **样式设置区**：可设置字体、对齐、圆角、边距、阴影等样式属性
4. **预览区**：设置完样式后可在预览区预览效果

## 状态样式介绍{#introduce}

状态样式是根据组件的状态来展示不同的效果，包含悬停、按下、选中、禁用、聚焦这五种。

### 悬停{#hover}

悬停即是指，当鼠标滑动到组件上时的状态，添加悬停状态样式的具体操作参考[使用状态样式](#use)。

![悬停](./images/2021-08-18-09-41-12.gif)

示例地址：[悬停](https://demo.succbi.com/v5/demo-spg/%E6%8C%89%E9%92%AE)

### 按下{#press}

按下即是指，使用鼠标左键点击组件，从按下之后到松开之前这段时间内的状态，添加按下状态样式的具体操作参考[使用状态样式](#use)。

![按下](./images/2021-08-18-09-53-12.gif)

示例地址：[按下](https://demo.succbi.com/v5/demo-spg/%E6%8C%89%E9%92%AE)

### 选中{#select}

选中即是指，使用鼠标左键点击选择某个选项后的状态，添加选中状态样式的具体操作参考[使用状态样式](#use)。

![选中](./images/2021-08-18-09-44-49.png)

示例地址：[选中](https://demo.succbi.com/v5/demo-spg/%E5%88%97%E8%A1%A8)

### 禁用{#disable}

禁用即是指，当前**组件-显示-禁用**属性设置为`禁用`时的状态，组件在这种状态下，不可进行任何操作，添加禁用状态样式的具体操作参考[使用状态样式](#use)。

![禁用](./images/2021-08-18-09-57-26.png)

示例地址：[禁用](https://demo.succbi.com/v5/demo-spg/%E6%8C%89%E9%92%AE)

### 聚焦{#focus}

聚焦一般用于步骤条中，对当前正在进行中的步骤进行状态标注，添加聚焦状态样式的具体操作参考[使用状态样式](#use)。

![禁用](./images/2021-08-18-11-06-12.gif)

示例地址：[聚焦](https://demo.succbi.com/v5/demo-spg/%E6%AD%A5%E9%AA%A4%E6%9D%A1)

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

组件|状态样式|条件样式|
-|-|-|
[文本](../../components/common/text.md)|悬停、按下、禁用|不支持
多行文本|悬停、按下、禁用|不支持
[按钮](../../components/common/button.md)|悬停、按下、选中、禁用|突出显示
[文本/数值输入](../../components/input/textinput.md)|禁用|突出显示
多行输入|禁用|突出显示
[多选/单选面板](../../components/input/selectionpanel.md)|悬停、按下、选中、禁用|突出显示
[下拉框](../../components/input/combobox.md)|禁用|突出显示
[日期](../../components/input/datecombobox.md)|禁用|突出显示
[快速搜索](../../components/input/searchbox.md)|禁用|突出显示
[搜索框](../../components/input/searchinput.md)|禁用|突出显示
[条件指示](../../components/input/filtersviewer.md)|悬停、按下、选中|突出显示
[标签页](../../components/navigation/tabbar.md)|悬停、按下、选中|突出显示
[步骤条](../../components/navigation/steppers.md)|选中、聚焦|突出显示
[数据列表](../../components/data/list.md)|不支持|突出显示、最前最后、数据条、步进器、色阶、图标集
[树](https://docs.succapp.com/v5/superpage/component/tree)|悬停、按下、选中|突出显示
[移动列表](../../components/mobile/mobilelist.md)|不支持|突出显示
消息列表|不支持|突出显示