テーマ

組み込みテーマ

ActiveReportsJSパッケージ、CDN、およびActiveReportsJSのnpmパッケージには、ビューワの外観を設定するための次のCSSファイルが含まれています。

ar-js-ui.css: ビューワとWebデザイナコンポーネントで共通の基本的なスタイル
ar-js-viewer.css: ビューワの基本的なスタイル
dark-yellow-ui.css: ビューワとWebデザイナコンポーネントで共通の「ダークイエロー」テーマのスタイル
dark-yellow-viewer.css: ビューワの「ダークイエロー」テーマのスタイル
green-ui.css: ビューワとWebデザイナコンポーネントで共通の「グリーン」テーマのスタイル
green-viewer.css: ビューワの「グリーン」テーマのスタイル
light-blue-ui.css: ビューワとWebデザイナコンポーネントで共通の「ライトブルー」テーマのスタイル
light-blue-viewer.css: ビューワの「ライトブルー」テーマのスタイル

ビューワのデフォルトの「ダークイエロー」、「グリーン」、または「ライトブルー」のテーマを使用するために、対応するCSSスタイルファイルをアプリケーションにインポートする必要があります。これはJavaScriptアプリケーションで、次のようにlinkタグを使用して実現できます。

<!-- CDN参照をご利用する場合は以下URLの"X.X.X"を使用するActiveReportsJSのバージョンに置き換えてご利用ください -->
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-viewer.css"
  type="text/css"
/>

css-loaderをサポートするアプリケーションでは、次のようにimportステートメントを使用してこれらのスタイルをインポートできます。

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

カスタムテーマ

ビューワのカスタムテーマを作成することができます。

テーマエディタを開きます。
ビューワの様々な部分に対して色、フォント、および罫線を設定します。
テーマをダウンロードします。ダウンロードされたzipファイルには、ar-js-ui.css、ar-js-viewer.css、およびar-js-designer.cssの3つのファイルが含まれます。ar-js-ui.cssおよびar-js-viewer.cssファイルを上記に説明したように使用できます。ar-js-designer.cssファイルは、Webデザイナコンポーネント > テーマのスタイルを設定するために使用できます。