헤더, 풋터, 상태바등 주변 영역
본 페이지는 스타일 영역 구분중 헤더, 풋터, 상태바등 주변 영역에 대한 설명입니다.
다른 영역에 대한 설명은 아래 링크를 참고하세요.
rg-header, rg-footer
헤더와 풋터 영역의 스타일을 지정합니다. 헤더에는 상태에 따라 몇 가지 스타일이 중첩되어 적용될 수 있습니다. 예를 들어 특정 셀에 포커스가 있는 경우 해당컬럼의 헤더영역은 rg-header-focus 클래스의 영향을 받게 됩니다.
헤더에도 소팅과 필터링에 사용되는 이미지들이 base64 형식으로 포함되어 있으며, 사용자 스타일에 맞게 수정이 가능합니다.
아래 사용예는 헤더의 배경색을 변경하는 예입니다.
.rg-header {
text-align: center;
font-weight: bold;
color: #4e545f;
/* 헤더의 색깔 변경 */
background: #0000ff;
}
/* ... */
.rg-header-focus {
/* 포커스 헤더의 색깔 변경 */
background: #000000;
color: #3b2f14;
}
rg-rowindicator-*, rg-statebar-_, rg-checkbar-*
인디케이터, 상태바, 체크바는 행의 여러가지 속성 및 상태를 표현하고 관리하는 영역입니다. rg-rowindicator-*, rg-statebar-*, rg-checkbar-* 클래스들은 이 영역의 스타일을 관리합니다.
사용예에서는
.rg-rowindicator-cell {
/* 인디케이터 배경색 변경 */
background-color: #0000ff;
border-top: none;
border-right: 1px solid #bcc0c8;
border-bottom: 1px solid #bcc0c8;
border-left: none;
padding-left: 3px;
padding-right: 3px;
}
/* ... */
.rg-statebar-cell {
/* 상태바 배경색 변경 */
background-color: #0000ff;
border-top: none;
border-right: 1px solid #d2d5da;
border-bottom: 1px solid #d2d5da;
border-left: none;
text-align: center;
}
/* ... */
.rg-checkbar-cell {
/* 체크바 배경색 변경 */
background-color: #0000ff;
text-align: center;
border-top: none;
border-right: 1px solid #d2d5da;
border-bottom: 1px solid #d2d5da;
border-left: none;
}