V2
V2V1

主题设置

内置主题

ActiveReportsJS 安装包和 CDN 包中 @grapecity/activereports包含了 ActiveReportsJS Viewer 控件可用的主题样式文件:

  • ar-js-ui.css - Viewer 及设计器控件通用的样式文件
  • ar-js-viewer.css - Viewer 控件默认的主题样式文件。
  • dark-yellow-ui.css - "深色系" 主题
  • dark-yellow-viewer.css - 适用 Viewer的 "深色系" 主题
  • green-ui.css - "绿色系" 主题
  • green-viewer.css - 适用 Viewer的 "绿色" 主题
  • light-blue-ui.css - "轻蓝色" 主题
  • light-blue-viewer.css - 适用 Viewer的 "轻蓝色" 主题

为了使用默认的 "深色系", "绿色系",或 "轻蓝色" 通用的 CSS 文件也需要先引入进来。 如:

<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-viewer.css"
  type="text/css"
/>

在应用中也支持 CSS 加载器,可以通过使用 import 语句,导入样式,例如:

import "@grapecity/activereports/styles/light-blue-ui.css";
import "@grapecity/activereports/styles/light-blue-viewer.css";

自定义主题

可以为 ActiveReportsJS 报表 Viewer 使用自定义主题:

  • 打开 主题编辑器
  • 设置颜色,字体,边线等样式属性。
  • 设置完成后保存,并下载主题,下载的压缩包内包含: ar-js-ui.css, ar-js-viewer.css, 及 ar-js-designer.css文件。 您可以使用前两个文件来设置 Viewer的样式。 第三个样式文件是设计器样式文件.