[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

사용자 지정 범위 그룹

SpreadJS는 워크시트의 외관을 향상시키고 사용자가 데이터를 효율적으로 구성하고 조작할 수 있도록 범위 그룹(range groups)의 사용자 지정을 지원합니다.

다음 이미지와 같이 범위 그룹에 대해 배경색, 테두리 색상, 개요 영역 색상, 아이콘 배경색, 숫자 및 +/-의 글꼴 색상, 숫자 및 +/-의 배경 이미지, 버튼의 테두리 색상, 선 색상, 선 굵기 및 점(dot) 색상 등을 사용자 정의할 수 있습니다:



다음 표는 사용자 지정 가능한 범위 그룹 속성과 해당 CSS 클래스, CSS 속성을 보여줍니다:

범위 그룹 속성

CSS 클래스 이름

CSS 속성

추가 설명

개요 영역의 배경색

gc-group

background-color


개요 영역의 테두리 색상

gc-group

color


아이콘의 배경색

gc-group-box

background-color


숫자 및 +/-의 글꼴 색상

gc-group-box

color


버튼 테두리 색상

gc-group-box

border-color

CSS의 border-top-color만 사용되며, 다른 테두리 색상은 무시됩니다.

숫자 및 + 기호의 배경 이미지

gc-group-box-expand

background-image

사용자가 background-image를 설정하면 기본 테두리 색상 및 배경색은 투명해집니다.

설정하지 않으면 기본적으로 gc-group-box의 스타일을 사용합니다.

CSS에 여러 개의 background-image가 정의된 경우, 첫 번째 이미지만 적용됩니다.

숫자 및 - 기호의 배경 이미지

gc-group-box-collapsed

background-image

위와 동일

선 색상

gc-group-line

border-color

CSS의 border-top-color만 사용되며, 다른 테두리 색상은 무시됩니다.

선 굵기

gc-group-line

border-width

CSS의 border-top-width만 사용되며, 다른 테두리 두께는 무시됩니다.

점(dot) 색상

gc-group-dot

color


다음 코드는 스프레드시트에서 범위 그룹의 속성을 사용자 정의하는 예시입니다:

    .gc-group {
        background-color: rgb(180, 211, 230);
        color: #999999;
        border-width: 0px;
        border-style:solid;
    }
    .gc-group-box {
        background-color: #fff;
        color: rgb(8, 154, 245);
        border-color:rgb(32, 158, 241);
    }
    .gc-group-line{
        border-width:2px;
        border-style:solid;
        border-color:rgb(137, 199, 243);
    }
    .gc-group-dot{
        color:blue;
    }

참고: 한 페이지 내에서 스프레드시트 요소마다 서로 다른 CSS를 다수로 사용자 지정하는 것은 불가능합니다.

Ask ChatGPT