V2
V2V1

主题

ActiveReportsJS 下载包, CDN 分发 和 @grapecity/activereports npm包 包括以下CSS文件,这些文件用于设置 ActiveReportsJS设计器 组件的外观:

  • ar-js-ui.css - 用于Viewer和Designer组件的常见样式
  • ar-js-designer.css - 设计器组件的默认主题的样式
  • dark-yellow-ui.css - “深黄色”主题的常用样式
  • dark-yellow-designer.css - 设计器组件的“深黄色”主题样式
  • green-ui.css - “绿色”主题的常用样式
  • green-designer.css - 设计器组件的“绿色”主题样式
  • light-blue-ui.css - “浅蓝色”主题的常用样式
  • light-blue-designer.css - 设计器组件的“浅蓝色”主题样式

为了使用设计器组件的默认主题:“深黄色”,“绿色”或“浅蓝色”,应将相应的CSS样式导入到应用程序中。 在纯JavaScript应用程序中,可以通过使用link标签来完成,例如:

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

在支持CSS加载器的应用程序中,可以使用import语句导入这些样式,例如:

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

自定义主题

您还可以为ActiveReportsJS报表设计器组件生成自定义颜色主题:

  • 打开在线主题编辑器
  • 为报表查看器组件的各个部分设置颜色,字体和边框。
  • 下载主题。 下载的zip归档文件包含3个文件: ar-js-ui.css, ar-js-designer.css, 和 ar-js-viewer.css。您可以完全按照上述说明使用前两个文件。第三个文件是查看器组件