[{"id":"3d06deaa-2e4d-479c-b95a-2dcb8abfc887","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"e822faa9-5b39-474c-8f04-d95dcd787a4e","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"091ec731-67fd-4a2a-a703-3728fe885481","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c4d1bedb-691f-49bb-96ed-65f91b580b0c","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"83de1fff-256a-4bcf-9d47-c12ac032a9e4","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"844918ae-7b53-4e16-8a83-4d9203303aa2","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"eaf39ba6-65df-466b-bc99-d40907e64e8e","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"65c6fd4f-dc15-4112-b00a-45207cea85fc","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"460f9118-8a3c-40da-8eba-63a1ba9df454","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"d2fc8bc1-89bf-4483-a3c2-be4be40fff31","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"b63907ef-97db-412d-b9e9-61e1cb319d27","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"d7124176-a563-4cf4-8f9a-f8ae3af669ac","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"f1ef6a79-1200-4477-bf3b-d1f4b52bf586","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"4b1a964f-7b24-4943-a2e2-77ff450e1f1d","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"ab703b5b-c2f4-48dc-925d-878261bce75f","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"a4de2920-3951-4baf-a478-888961b5e3c4","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]}]

テーマ

組み込みテーマ

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デザイナコンポーネント > テーマのスタイルを設定するために使用できます。