ActiveReportJS 뷰어 테마

기본 제공 테마

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

ar-js-ui.css - 뷰어와 디자이너 컴포넌트에 모두 사용되는 공통 스타일
ar-js-viewer.css - 뷰어 컴포넌트의 기본 테마 스타일
dark-yellow-ui.css - "진한 노랑" 테마의 공통 스타일
dark-yellow-viewer.css - 뷰어 컴포넌트의 "진한 노랑" 테마 스타일
green-ui.css - "녹색" 테마의 공통 스타일
green-viewer.css - 뷰어 컴포넌트의 "녹색" 테마 스타일
light-blue-ui.css - "연한 파랑" 테마의 공통 스타일
light-blue-viewer.css - 뷰어 컴포넌트의 "연한 파랑" 테마 스타일

뷰어 컴포넌트의 기본 "진한 노랑", "녹색" 또는 "연한 파랑" 테마를 사용하려면 해당 css 스타일을 응용 프로그램으로 가져와야 합니다. 순수 JavaScript 응용 프로그램에서는 link 태그를 사용하여 가져올 수 있습니다. 예를 들어 다음과 같습니다.

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

CSS 로더를 지원하는 응용 프로그램에서는 import 문을 사용하여 이러한 스타일을 가져올 수 있습니다. 예를 들어 다음과 같습니다.

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

사용자 정의 테마

또한 ActiveReportsJS 보고서 뷰어 컴포넌트에 대한 사용자 정의 색 테마를 생성할 수 있습니다.

온라인 테마 편집기를 엽니다.
보고서 뷰어 컴포넌트의 다양한 부분에 대한 색상, 글꼴 및 테두리를 설정합니다.
테마를 다운로드합니다. 다운로드한 zip 보관 파일은 ar-js-ui.css, ar-js-viewer.css 및 ar-js-designer.css, 이렇게 3개 파일로 구성되어 있습니다. 처음 2개 파일은 정확히 위 설명에 따라 사용할 수 있습니다. 세 번째 파일은 디자이너 컴포넌트에 대한 스타일입니다.