페이지 테마 만들기/사용자 정의
SpreadJS의 문서 테마는 워크시트의 외관을 변경할 수 있습니다. 테마는 다양한 색상과 글꼴을 사용하여 만들어지며, 중요한 내용을 강조하면서 시각적으로 매력적인 데이터를 만드는 데 도움이 됩니다.
SpreadJS는 기본 제공 테마를 지원합니다. 하지만 워크시트에 독특한 외관을 부여하기 위해 수동으로 사용자 지정 테마를 만들 수도 있습니다. 필요에 따라 현재 테마의 색상과 글꼴도 사용자 지정할 수 있습니다.
기본적으로 테마 설정은 활성 시트에만 적용됩니다. 모든 열린 워크시트에 테마 설정을 적용하려면 ApplyThemeToAllSheets 속성을 true로 설정하세요.
// 모든 워크시트에 테마 적용하기.
designer.setData("ApplyThemeToAllSheets", true);SpreadJS 디자이너 컴포넌트에서는 테마 버튼이 페이지 레이아웃 > 테마 탭 그룹 내에 있습니다.
테마
사용자는 제공된 테마 드롭다운 목록에서 원하는 테마를 선택할 수 있습니다. 드롭다운에 나열된 테마에 마우스를 올리면 아래와 같이 워크시트에서 미리보기를 확인할 수 있습니다.
사용자 정의 테마 만들기
사용자 정의 테마를 만들려면 명령어의 dropdownList 속성을 수정해야 합니다. 다음 샘플은 SpreadJS 디자이너 컴포넌트의 테마 컬렉션에 새로운 테마 ‘My Custom Theme’을 추가하는 방법을 보여줍니다.
// 사용자 정의 테마 생성.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeSetting);
let customTheme = new GC.Spread.Sheets.Theme("customTheme1", GC.Spread.Sheets.ThemeColors.Apex, "Tw Cen MT", "Tw Cen MT");
themeCommand.dropdownList = [{ text: "My Custom Theme", value: JSON.stringify(customTheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// 사용자 정의 테마 추가.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeSetting] = themeCommand;새 사용자 정의 테마가 테마 드롭다운 목록에 표시됩니다.
테마 색상
테마 색상은 텍스트, 배경, 강조 표시, 하이퍼링크 등에 적용되는 색상 구성을 나타냅니다. 이를 위해 Colors 버튼 옆의 드롭다운 아이콘을 클릭하세요. 그런 다음 목록에서 원하는 색상 구성을 선택하면 워크시트의 색상이 선택한 구성에 따라 변경됩니다. 드롭다운에 나열된 색상 구성 위에 마우스를 올리면 아래와 같이 워크시트에서 미리보기를 확인할 수 있습니다.
사용자 정의 테마 색상 만들기
새 사용자 정의 색상 구성을 만들려면 명령어의 dropdownList 속성을 수정해야 합니다. 다음 샘플은 SpreadJS 디자이너 컴포넌트의 색상 컬렉션에 ‘My Custom Color’라는 새로운 테마 색상을 추가하는 방법을 보여줍니다.
// 사용자 정의 테마 색상 만들기.
let themeColorCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeColors);
let customColorScheme = new GC.Spread.Sheets.ColorScheme("myColor", "#ffffff", "#dbeff9", "#000000", "#17406d", "#0f6fc6", "#009dd9", "#0bd0d9", "#10cf9b", "#7cca62", "#a5c249", "#51c3f9", "#4eb3cf");
themeColorCommand.dropdownList = [{ text: "My Custom Color", value: JSON.stringify(customColorScheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// 사용자 정의 테마 추가.
colorconfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeColors] = themeColorCommand;새 사용자 정의 색상 구성이 Colors 드롭다운 목록에 표시됩니다.
테마 글꼴
워크시트의 제목, 본문, 열 머리글, 행 머리글 텍스트 글꼴 스타일은 테마 글꼴을 사용하여 변경할 수 있습니다. 이를 위해 글꼴 버튼 옆의 드롭다운 아이콘을 클릭하세요. 그런 다음 목록에서 원하는 글꼴 스타일을 선택하면 워크시트의 글꼴이 선택한 스타일에 따라 변경됩니다. 드롭다운에 나열된 글꼴 스타일 위에 마우스를 올리면 아래와 같이 워크시트에서 미리보기를 확인할 수 있습니다.
사용자 정의 테마 글꼴 만들기
새 사용자 정의 테마 글꼴을 만들려면 명령어의 dropdownList 속성 값을 수정해야 합니다. 다음 샘플은 SpreadJS 디자이너 컴포넌트의 글꼴 컬렉션에 ‘My Custom Font’라는 새로운 테마 글꼴을 추가하는 방법을 보여줍니다.
// 사용자 정의 테마 글꼴 만들기.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeFontCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeFonts);
let customThemeFont = new GC.Spread.Sheets.ThemeFont('MyFont', 'Tw Cen MT', 'Rockwell');
themeFontCommand.dropdownList = [{ text: "My Custom Font", value: JSON.stringify(customThemeFont) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// 사용자 정의 테마 글꼴 추가.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeFonts] = themeFontCommand;새로운 사용자 정의 글꼴이 글꼴 목록에 표시됩니다.
디자이너 컴포넌트 사용하기
SpreadJS 디자이너 컴포넌트를 사용하여 선택한 테마의 색상과 글꼴도 사용자 지정할 수 있습니다.
현재 색상 구성표를 사용자 지정하려면, 색상 드롭다운 목록 하단에 있는 '색 사용자 지정…'을 클릭하세요. '새 테마 색 만들기' 대화 상자에서 텍스트, 배경, 강조, 하이퍼링크 등 원하는 색상 구성표를 선택할 수 있습니다. 참고로, 샘플 상자에서 변경 사항을 미리 볼 수 있습니다.
또한, 글꼴을 사용자 지정하려면 글꼴 드롭다운 목록 하단에 있는 '글꼴 사용자 지정…'을 클릭하세요. '새 테마 글꼴 만들기' 대화 상자에서 제목과 본문에 사용할 글꼴을 선택할 수 있습니다. 선택하면 보기 상자에서 선택한 글꼴을 미리 볼 수 있습니다.
제한 사항
현재 SpreadJS 디자이너 컴포넌트에서는 테마 설정에 대해 실행 취소(Undo) 및 다시 실행(Redo) 기능을 지원하지 않습니다.