---
order: 6
navTitle: 标签页
---
# 仪表板组件-标签页

标签页组件可以根据需求新增多个标签选项，可以结合多页面板使用，通过切换标签选项控制切换多页面板页面的显示；也可以切换标签页过滤图表组件。如使用标签页切换疫情指标，展示选中指标随时间的变化趋势：

![标签页](./images/tabbar.gif)

示例地址：[标签页](https://demo.succbi.com/v5/bi/tabs)

## 使用标签页组件{#use}

标签页组件可以根据需求新增多个标签选项，可以结合多页面板使用，如下是操作步骤：

![操作步骤](./images/steps.gif)

1. **设置标签页数据**：在**属性栏**>**数据**>**列表数据**，下拉选择**枚举值**，并点击**枚举值**在对话框中添加4条枚举值
2. **设置标签页默认值**：**属性栏**>**数据**>**默认值**，下拉选择**确诊**
3. **添加交互**：**属性栏**>**交互**>**切换多页面板**，多页面板的制作可参考文档[多页面板](../layout/panelbook.md)
   1. 目标对象：**多页面板1**
   2. 目标面板：**事件源序号**

## 标签页属性{#attribute}

在**属性栏**>**样式**>**标签页**中可设置整个标签页组件的属性和样式。

### 切换选中动画{#switch}

勾选**启用**后，可以设置动画属性，即选中时标签页选项下线条标记的样式：

![动画](./images/2020-06-24-16-57-49.png)

- 选中线条颜色：设置线条的颜色，可设置为纯色和渐变色
- 选中线条宽度：设置线条占其对应选项的占比，100%即为线条与选项等宽
- 选中线条高度：设置线条的高度，最小为1，最大为10

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

用于标注标签页的特殊值，或者设置鼠标在标签页上进行操作时，标签页的状态样式，主要有以下几种类型：

![条件样式](./images/2020-06-24-17-01-41.png)

- 突出显示：设置当标签页的值为某个特殊值时，选项的显示样式，参考文档[突出显示](../../../../report/design/style/condition-style.md#highlight)

- 标签页状态样式：当鼠标**悬停**、**选中**或**按下**时标签页及选项的样式效果，参考文档[标签页状态样式](../../design/type/condition-style.md#effect-style)

### 滚动到顶部时固定{#top-fix}

可以在**属性栏**>**数据**>**高级**中设置**滚动到顶部时固定**，勾选后，当标签页滚动到页面顶部时会固定显示并切换其他页面展示。例如移动设备上展示时可以不必回到顶部就可以切换选项卡，示例地址：[疫情动态](https://demo.succbi.com/v5/demo/mobile/%E5%90%84%E5%9C%B0%E5%AE%9E%E5%86%B5%E5%9B%BE%E6%9E%90)。

![顶部固定](./images/mobile.gif)