[]

ActiveReportJS 뷰어 테마

기본 제공 테마

ActiveReportsJS 다운로드 패키지, CDN 배포 및 @mescius/activereportsjs npm 패키지에는 ActiveReportsJS 뷰어 컴포넌트의 모양을 설정하는 데 사용되는 다음 CSS 파일이 포함되어 있습니다.

ar-js-ui.css: 뷰어와 디자이너 컴포넌트에 모두 사용되는 공통 스타일.
ar-js-viewer.css: 뷰어 컴포넌트에 특정한 스타일, 여러 가지 미리 정의된 테마를 포함합니다:
- System
- Default
- DefaultDark
- DarkOled
- HighContrast
- HighContrastDark
- ActiveReports
- ActiveReportsDark

<link> 태그를 통해 ActiveReportsJS 보고서 뷰어를 호스팅하는 하나의 페이지나 컴포넌트에 이러한 스타일을 첨부할 수 있습니다.

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
  type="text/css"
/>

또는 응용 프로그램에서 지원되는 경우, CSS 로더를 통하여 이러한 스타일을 포함할 수 있습니다.

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

뷰어 컴포넌트 테마 설정

순수 자바스크립트

순수 자바스크립트 응용 프로그램에서 뷰어 컴포넌트 테마를 설정하기 위하여, 컴포넌트 생성자에 전달된 configuration 객체 또는 컴포넌트 인스턴스의 theme 속성을 사용합니다.

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

React, Angular, Vue, Svelte

React, Angular, Vue, Svelte ActiveReportsJS 보고서 뷰어 컴포넌트에 대하여, 컴포넌트의 theme 속성을 사용합니다. 예시:

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

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