テーマ

組み込みテーマ

ActiveReportsJSパッケージ、CDN、およびActiveReportsJSのnpmパッケージには、Webデザイナコンポーネントの外観を設定するための次のCSSファイルが含まれています。

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

Webデザイナコンポーネントのデフォルトの「ダークイエロー」、「グリーン」、または「ライトブルー」のテーマを使用するために、対応する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-designer.css"
  type="text/css"
/>

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

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

カスタムテーマ

Webデザイナコンポーネントのカスタムテーマを作成することができます。

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