ActiveReportsJS에서 사용자 정의 테마를 사용하는 방법 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

기타 ActiveReportsJS에서 사용자 정의 테마를 사용하는 방법

페이지 정보

작성자 GrapeCity 작성일 21-03-25 15:09 조회 167회 댓글 0건

본문

직접 만들지 않은 JavaScript 구성 요소에 공용 테마 또는 스타일을 적용하기가 힘들 수 있습니다. CSS 클래스 및 이 클래스가 구성 요소에서 어떻게 사용되는지 알아야 하며, 특히 디자이너가 아닌 경우에는 훨씬 더 어려울 수 있습니다.


수동으로 작업하는 대신 해당 디자인 생성을 자동화하는 도구를 사용해야 합니다. 그것이 GrapeCity에서 테마 편집기를 만든 이유입니다.


ARJS 테마 편집기는 ActiveReportsJS 뷰어 구성 요소에 대한 사용자 정의 테마를 만들 수 있는 CSS 파일 생성기입니다. 입력 필드의 모양, 글꼴 및 글꼴 크기를 변경할 수 있습니다.


테마 편집기는 여기에서 온라인으로 액세스할 수 있습니다.

ActiveReportsJS 테마 사용자 정의

오른쪽 패널에 나열된 변수를 사용하여 뷰어를 사용자 정의할 수 있으며, 일부 변경 사항을 즉시 볼 수 있습니다. 뷰어에 적용된 테마를 보려면 “미리 보기” 버튼을 클릭합니다.


테마 사용자 정의

테마를 만들려면 오른쪽 패널을 사용하여 색, 테두리 반경 및 글꼴의 구성을 추가합니다. “변수” 버튼을 클릭하여 구성에 사용 가능한 변수를 검색할 수도 있습니다.

밝거나 어두운 테마 베이스의 테마 변수를 토글하는 것으로 시작합니다.

ActiveReportsJS 테마 사용자 정의


기본 테마

ActiveReportsJS 뷰어에는 두 가지 기본 테마인 밝은 테마와 어두운 테마가 있습니다. 이러한 테마는 도구 모음과 뷰어 화면에만 적용되며, 테마 편집기를 사용하여 사용자 정의할 수는 없습니다. 밝은 테마는 도구 모음 및 뷰어 화면의 배경으로 회색 음영을 사용하는 기본 테마이며, 어두운 테마는 검은색 음영을 사용합니다.

ActiveReportsJS 테마 사용자 정의어두운 테마


테마 색

액센트 색은 강조를 위해 사용되는 뷰어의 기본 색입니다. 이 색은 사이드 패널의 배경, 일부 텍스트와 버튼, 도구 모음의 아이콘에 적용됩니다. 대비 색은 사이드 패널에서 텍스트와 아이콘에 주로 사용될 보조 색입니다. 오류와 경고는 모달에 나타나는 알림용입니다. 이것은 보고서 파일이 올바르게 로드되지 않은 경우에만 나타납니다.

ActiveReportsJS 테마 사용자 정의Steelers 테마


여기서는 어두운 테마를 베이스로 사용하고 액센트 및 대비에 클래식 블랙 및 골드 색을 사용하여 Pittsburgh Steelers NFL 팀의 색을 선택했습니다. 오류 및 경고 색은 Steelers 로고에도 있는 파란색과 빨간색 별표와 같습니다. 미리 보기에서 Steeler 테마의 사실적인 느낌을 확인할 수 있습니다.

ActiveReportsJS 테마 사용자 정의테마 미리 보기


참고: 브라우저의 뒤로 버튼이 아닌 미리 보기 옆의 뒤로 버튼을 클릭하여 편집기로 돌아갑니다.


웹 기반 보고의 테두리 반경

테두리 반경 변수는 사이드 패널의 항목에 적용됩니다. 버튼, 확인란, 텍스트 상자와 같은 입력 요소에는 이 변수 필드에서 정의한 테두리 반경이 적용됩니다. 둥근 입력 요소의 경우에는 여기서 숫자 값을 높이면 됩니다.

ActiveReportsJS 테마 사용자 정의

테두리 반경


테마 글꼴

테마의 글꼴과 글꼴 크기도 지정할 수 있습니다. 글꼴 이름을 글꼴 패밀리에 추가하고, 사용할 수 없는 백업 글꼴 몇 개를 포함합니다. 테마 편집기는 웹 기반 글꼴을 지원하므로 일부 글꼴은 미리 볼 수 없습니다.

Steeler의 테마를 자세히 보면 기본 글꼴인 Gunplay가 미리 보기에 표시되지 않는 것을 알 수 있습니다. Gunplay는 표준 글꼴이 아니므로 Courier New 글꼴이 대신 표시됩니다. Gunplay 글꼴이 응용 프로그램에 설치되어 있으면 사용할 수 있습니다.


테마 디자인 만들기

테마를 만들 준비가 되면 다운로드 버튼을 클릭합니다. CSS 파일에 테마 세부 정보가 포함되어 있습니다.


응용 프로그램에 테마 추가

사용자 정의 테마를 적용하려면 다운로드한 CSS 파일을 응용 프로그램에 추가해야 합니다. 응용 프로그램의 폴더에 파일을 추가하고 HTML 파일에서 테마를 참조할 태그를 포함하거나, CSS/Style 로더를 사용하는 경우 적절한 .js 파일에 문을 가져옵니다.

ActiveReportsJS 테마 사용자 정의


응용 프로그램이 올바르게 설정되었으면 응용 프로그램을 실행하고 적용된 테마를 볼 수 있습니다. 글꼴이 설치된 경우에는 글꼴도 표시됩니다.

ActiveReportsJS 테마 사용자 정의


테마 편집기 개요

테마 편집기를 통해 디자인이 구성 요소 전체에서 일관성을 유지하고 사용자와 팀의 개발 시간을 절약할 수 있습니다. 테마를 만들어 응용 프로그램에 추가하는 데 몇 분밖에 걸리지 않습니다. 사용 제품에서 ActiveReportsJS를 조정할 때 유용하기를 바랍니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.