
# 选项卡
选项卡是导航组件的一种，用于快速在页面某区域中切换不同内容，显示为其关联内容上方的单行元素。
在大屏设计页面，从"全部组件 \> 导航"中，拖拽"选项卡"组件至画布空白区域，如[图1]。
图1选项卡   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123185128.png "点击放大")
图2边距样式说明   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184108.png)
#### 卡片
卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
图3选项卡卡片   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123185136.png)
- 背景
  - 背景色：设置组件卡片的背景颜色。
  
  - 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。
  
  - 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。
  
  - 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。
   
- 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
- 边距：组件中图表距离整个组件四边（上、下、左、右，如[图2]）的距离，默认为0，即铺满整个组件。
#### 配置
在配置中，设置选项卡基础样式和选项卡设置。
图4选项卡配置   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425149.png)
- 基础样式设置
  - 标签圆角：设置标签圆角的大小，"0"为直角。
    图5标签圆角   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306745.png) 
  
  - 标签间距：设置标签之间的距离，默认为"0"。
  
  - 标签内边距：设置标签和组件边框之间的距离，默认为"自适应"。设置为"固定值"时，可自定义内边距大小。
    图6标签内边距   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027016.png "点击放大") 
  
  - 默认文字：选项卡没启用，处于默认状态下的文字字体、文字粗细、文字大小、文字颜色。
  
  - 激活文字颜色：选中当前选项卡Tab，即激活状态下的文字颜色。
  
  - 悬浮文字颜色：鼠标悬浮当前选项卡Tab上时，文字的颜色。
  
  - 默认背景样式：设置选项卡未启用时，默认的背景样式，支持颜色和图片两种样式。
  
  - 默认背景色：设置选项卡未启用时，默认的背景色。"默认背景样式"设置为"颜色"时，才显示该参数。
  
  - 默认背景样式 \> 填充方式：选项卡未启用时，背景图片的填充方式，如拉伸、居中等。"默认背景样式"设置为"图片"时，才显示该参数。
  
  - 默认背景图片：选项卡未启用时，默认的背景图片，推荐使用JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不超过50MB。
  
  - 激活背景样式：选中选项卡时，显示的背景样式，支持颜色和图片两种样式。
  
  - 激活背景色：选中选项卡，即激活状态下的背景色。"激活背景样式"设置为"颜色"时，才显示该参数。
  
  - 激活背景样式 \> 填充方式：选中选项卡时，背景图片的填充方式，如拉伸、居中等。"激活背景样式"设置为"图片"时，才显示该参数。
  
  - 激活背景图片：选中选项卡时，显示的背景图片，推荐使用JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不超过50MB。
   
- 选项卡设置
  - 初次激活是否触发事件：初次激活选项卡时，是否触发事件。
  
  - 初次激活选项卡：页面加载后显示的激活状态下的选项卡。
  
  - 选项卡数量：选项卡Tab的数量。
  
  - 选项卡1/2名称：选项卡显示的名称。
   
 
#### 交互
在交互中，配置选项卡组件与其他组件或页面之间的交互能力。交互设置更多介绍，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。
