使用小组件 > 2D > 选项卡
  
选项卡
这个小组件有什么功能？
“选项卡”小组件是一种特殊类型的容器。小组件中的每个选项卡都有其各自的内容。尽管所有选项卡都会加载其内容以便在选项卡之间快速切换，但是每次只能看到一个选项卡。
何时会用到这个小组件？
当您想要启用高级内容组织方式 (例如，在体验的视图、数据集或各功能之间切换) 时，会用到“选项卡”小组件。例如，如果要显示卡车的三种独立模型数据，则使用“选项卡”可允许体验查看者方便地在三种模型信息之间来回切换。
这个小组件中是否有专用的属性、服务、事件或操作？
若要查看小组件常用的属性、服务和事件的列表，请参阅小组件的通用属性、服务和事件。
下表列出了这个小组件的专用属性、服务和事件。
属性
JavaScript
类型
说明
选项卡方向
taborientation
string
选择“垂直”或“水平”。
* 
在两个选项之间切换时，在 Vuforia Studio 中无法看到方向的变化。若要查看方向的变化，您必须预览体验。
选项卡内边距
tabpadding
string
为容纳选项卡和选项卡内容的容器设置内边距。输入一个数字，后面紧跟着受支持的格式 (例如，10px)：
• px
• %
• in
• mm
• cm
• ex
• em
• pt
• pc
如果想要为不同的选项卡内容设置内边距，则可在项目树中分别选中它们并编辑各个内边距属性。
选项卡控件条类
stripclass
string
为选项卡控件条指定专用的类。
事件
JavaScript
说明
单击选项卡
clicktab
在项目树中拖动模型的“单击选项卡”事件。单击“单击选项卡”事件旁边的 JS 图标以输入表达式。
此小组件可以使用以下操作。
• 添加选项卡
如果已添加选项卡，则选项卡显示以下属性：
属性
JavaScript
类型
说明
标题
title
string
选项卡上显示的文本。
小组件的显示效果
以下是小组件的显示效果示例！
使用时的必要步骤
显示效果
1. 将“选项卡”小组件拖放到工作区。
2. 单击“添加选项卡”以添加所需数量的选项卡。在本示例中，我们添加了两个额外的选项卡。
3. 选择一个选项卡，然后在“标题”字段中输入要显示的选项卡名称。
4. 将想要为该选项卡显示的小组件拖放到“选项卡内容”中。
使用 CSS 设置小组件样式
您可以使用 CSS 设置小组件样式！下面是您可以创建和应用的 CSS 类的示例：
* 
请注意，最好为您的类指定唯一名称，以避免与其他类或预装属性发生冲突。
CSS 示例
显示效果
.ptc-tabs .tab-strip-item {
font-size: 25px;
}
有关实现 CSS 类的详细信息，请参阅应用程序样式。