テーマ

組み込みテーマ

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

ar-js-ui.css：ビューワとWebデザイナコンポーネントで共通の基本的なスタイル
ar-js-viewer.css：以下の定義済みテーマを含む、ビューワのスタイル
- System：システムテーマ
- Default：デフォルト
- DefaultDark：デフォルト（ダーク）
- DarkOled：有機EL（ダーク）
- HighContrast：ハイコントラスト
- HighContrastDark：ハイコントラスト（ダーク）
- ActiveReports：グリーン
- ActiveReportsDark：グリーン（ダーク）

ビューワを表示するために、対応するCSSスタイルファイルをアプリケーションにインポートする必要があります。これはJavaScriptアプリケーションで、次のようにlinkタグを使用して実現できます。

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

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

import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

ビューワテーマの設定

JavaScriptアプリケーション

JavaScriptアプリケーションでビューワのテーマ設定するには、コンストラクタに渡すオプションにthemeプロパティを設定します。

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", {theme: 'ActiveReports'});

Angular, React, Vue, Svelte

Angular、React、Vue、Svelteコンポーネントの場合は、ビューワコンポーネントのthemeプロパティを使用します。

import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div className="App">
        <ReportViewer theme="ActiveReports" />
    </div>
  );
}