扩展图册标签页组件

在定义图册时，可以使用标签页组件，在图册页中展示多个资源。 SaCa DataViz内置了一些标签页的主题（即外观），如果不能满足需求，用户可以自己添加新的主题，或修改已有主题的样式。

扩展标签页组件涉及资源文件和样式文件的修改，以下分别加以说明。

修改资源文件

类似边框组件，标签主题也有自己的资源文件。位于前台工程（dataviz-web）的/src/assets/tab/目录下。

修改theme.json。该文件内容是一个数组，列出当前系统中可以使用的主题列表，每一项表示一个主题：

{
  "name": "theme1",     // 名称
  "thumbnail": "1.png"  // 缩略图文件名，只写名称，不写路径。
}

将标签主题的缩略图放到thumbnail目录下。缩略图用于在图册编辑页面右侧属性区显示，不是必须的，但还是建议提供。
为方便扩展，内置主题的标签样式全都使用背景图片（svg）来实现，这些图片统一放在theme目录下。如果也采用背景图的方式，请将制作好的图片（最好是svg，体积小、不失真）放到这个目录下。

修改样式文件

内置主题的样式是在前台工程（dataviz-web）的/src/css/tab/dashboard-tab.css文件中定义的。要添加或修改主题，需要编辑这个文件的内容。

选择器说明

.dv-dashboard-tabs：代表整个标签页
.tabs-header-top：标签页头部显示在上方时
.tabs-header-left：标签页头部显示在左侧时
.tabs-header：标签页头部，包含所有标签。内部标签使用ul实现，每个li代表一个标签。
.theme*：分别代表每个主题
.tab-content：标签页内容区，包含拖入的资源

修改标签的边框和背景

通常情况下，只有标签页头部标签的边框样式、背景需要修改，使用背景图可以很容易做到。以内置主题1为例，相关的配置如下：

.dv-dashboard-tabs > .tabs-header > ul.theme1 > li:hover,
.dv-dashboard-tabs > .tabs-header > ul.theme1 > li.active {
  background-image: url('../../assets/tab/theme/1.svg');
}

可以看到，该主题设置了标签在悬浮和激活状态时的样式，只需要指定一个图片即可，不需要使用复杂的CSS属性。

所以推荐使用背景图的方式，再复杂的样式，只要把设计好的图片替换一下就可以了。同理，如果标签默认就有样式，那就再提供一张图片就行了。

修改其他样式

如果要修改标签的字号、宽高、内外边距等，可以使用相应的CSS属性来控制。但请注意：在使用图册的播放时文本缩放功能时，由于修改这些样式会导致标签页布局（大小、位置）发生变化，可能无法正确进行缩放，导致显示不正常。

图册标签页扩展