本帖最后由 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)。
|
|