ActiveReportsJS v2.0 beta版—ActiveReportsJS设计器主题
本帖最后由 KearneyKang 于 2020-11-17 17:45 编辑ActiveReportsJS设计器主题
ActiveReportsJS [下载包](https://www.grapecity.com/activereportsjs/download), CDN 分发 和 [@grapecity/activereports](https://www.npmjs.com/package/@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`标签来完成，例如：
html
<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`语句导入这些样式，例如：
js
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``。您可以完全按照上述说明使用前两个文件。第三个文件是[查看器组件](../ActiveReportsJSViewer/Themes)。
页:
[1]