테마
스타일을 생성하여 셀, 행, 열 또는 시트에 할당할 수 있으며, SpreadJS 컨트롤에 테마를 설정할 수도 있습니다. 현재 테마, Excel 테마, Bootstrap 테마를 설정하거나 ThemeRoller를 사용하여 사용자 정의 jQuery 테마를 생성할 수 있습니다.
기본 SpreadJS 테마
기본 SpreadJS 테마를 사용할 수 있으며, 이를 위해서는 <head> 섹션에 스타일 링크를 추가해야 합니다. 예를 들어:
<link rel="stylesheet" href="css/gc.spread.sheets.x.x.x.css" />
Excel 테마
SpreadJS에서 Excel 테마 또는 스타일을 사용할 수 있으며, 이 역시 <head> 섹션에 스타일 링크를 추가해야 합니다. 예:
<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
다음 테마를 사용할 수 있습니다.:
이름 | CSS 파일 | 스냅샷 |
|---|---|---|
Excel 2013 White | gc.spread.sheets.excel2013white.x.x.x.css |
|
Excel 2013 Light Gray | gc.spread.sheets.excel2013lightGray.x.x.x.css |
|
Excel 2013 Dark Gray | gc.spread.sheets.excel2013darkGray.x.x.x.css |
|
Excel 2016 Colorful | gc.spread.sheets.excel2016colorful.x.x.x.css |
|
Excel 2016 Dark Gray | gc.spread.sheets.excel2016darkGray.x.x.x.css |
|
Excel 2016 Black | gc.spread.sheets.excel2016black.x.x.x.css |
|
Excel 테마를 다른 테마(예: Bootstrap 테마)와 함께 사용할 수도 있습니다. 예:
<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" title="aa" />
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css" title="aa" />
테마를 변경한 경우에는 refresh 메서드를 사용해야 합니다.
Bootstrap 테마
SpreadJS에서 Bootstrap 테마를 사용할 수 있습니다. 이를 위해서는 SpreadJS 스타일 링크 다음에 <head> 섹션에 Bootstrap 스타일 링크를 추가해야 합니다. 예를 들어, 프로젝트의 css 폴더에 bootstrap.css와 bootstrap-theme.css가 있는 경우, 다음과 같이 추가할 수 있습니다:
<link href=”css/gc.spread.sheets.x.xx.xxxxx.x.css” rel=”stylesheet” type=”text/css” />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
테마를 구성하거나 ThemeRoller를 사용하여 사용자 정의 테마를 생성하려면 다음 주제를 참조하세요: