데이터(본문 영역)

짝/홀수 행 배경색

짝수 혹은 홀수 행일 때 강조 배경색은 Alternate cfg의 설정에 따라 적용됩니다.

.IBColorDefault

.IBColorDefault는 Alternate 대상이 아닌 일반 데이터행의 배경색을 관리하는 클래스입니다.

.IBColorAlternate

.IBColorAlternate는 Alternate 대상인 데이터행의 배경색을 관리하는 클래스입니다.

.IBColorDefault와 .IBColorAlternate 클래스는 시트 생성 시점에 읽어서 적용되기 때문에 생성 이후 css를 변경하더라도 적용되지 않습니다.

Alternate cfg는 .IBColorAlternate외에 AlternateColor row와 외부 클래스를 이용하는 AlternateClass row를 통해 배경색을 설정하실 수 있습니다.

var OPT = {
  Def: {
    Row: {
      AlternateColor: 'skyblue'
    }
  }
}

---

행 높이 설정

행의 높이가 css를 통해 수정되었을 때에는 정상적으로 스크롤 동작이 이뤄지지 않을 수 있습니다.

행 높이 변경이 필요한 경우, css가 아니라 속성을 통해서 설정을 진행해주시기 바랍니다.

먼저, 행의 최소 높이는 Size cfg에 맞춰 설정해주시기 바랍니다.

그 외의 행 높이 설정은 Height row를 통해 설정하셔야 합니다.

var OPT = {
  Def: {
    Row: {
      Height: 100
    }
  }
}

---

셀 여백 설정

.IBType

.IBType은 시트의 여백을 관리하는 클래스입니다.

.IBType {
  /* 좌우 여백 제거 */
  padding: 6px 0px 5px 0px;
}

기본 테마의 여백

셀의 좌우 여백 제거

확인하기

---

셀 데이터 정렬

IBSheet에서 내에서 문자열 정렬 기능을 사용하실 경우, 별도의 css를 이용하여 정렬하시지 마시고, 정렬 속성 (Align, VAlign)을 통해 정렬하시기를 권장 드립니다.

왼쪽, 가운데, 오른쪽의 가로 정렬은 Align속성 Align row, Align col, Align cell을 통해 이루어집니다.

해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다.

.IBAlignLeft

.IBAlignLeft은 왼쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

.IBAlignCenter

.IBAlignCenter은 가운데 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

.IBAlignRight

.IBAlignRight은 오른쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

var OPT = {
  Def: {
    Row: {
      Height: 50
    }
  }
  Cols: [
    {"Header": "Align Left","Type": "Text","Name": "TextData1","Width": 120,"Align": "Left","CanEdit": 1},
    {"Header": "Align Center","Type": "Text","Name": "TextData2","Width": 120,"Align": "Center","CanEdit": 1},
    {"Header": "Align Right","Type": "Text","Name": "TextData3","Width": 120,"Align": "Right","CanEdit": 1},
  ]
}

가로 정렬

상단, 중단, 단의 세로 정렬은 VAlign속성 VAlign row, VAlign col, VAlign cell을 통해 이루어집니다.

해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다.

.IBVAlignTop

.IBVAlignTop은 상단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

.IBVAlignMiddle

.IBVAlignMiddle은 중단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

.IBVAlignBottom

.IBVAlignBottom은 하단 정렬 속성이 설정된 영역에 적용되는 클래스입니다.

var OPT = {
  Def: {
    Row: {
      Height: 50
    }
  }
  Cols: [
    {"Header": "VAlign Top","Type": "Text","Name": "TextData1","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Top'},
    {"Header": "VAlign Middle","Type": "Text","Name": "TextData2","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Middle'},
    {"Header": "VAlign Bottom","Type": "Text","Name": "TextData3","Width": 120,"Align": "Center","CanEdit": 1, "VAlign": 'Bottom'},
  ]
}

세로 정렬

---

NoData행 (조회된 데이터가 없을 때 사용)

NoDataMessage cfg 설정을 통해, 생성 후 혹은 조회 후 데이터가 없을 경우 데이터 영역에 '조회된 데이터가 없습니다.' 문구를 출력합니다.

NoDataMessage cfg가 설정되어 있을 때, NoDataMiddle cfg를 설정하여 해당 메시지의 위치를 데이터 영역의 중단 영역으로 위치하도록 조정할 수 있습니다.

.IBNoDataRow

.IBNoDataRow는 조회된 데이터가 없는 경우, 데이터가 없음을 표시하는 NoData 행을 관리하는 클래스입니다.

.IBNoDataRow {
  /* NoData행의 배경색을 연한 파랑색으로 */
  background-color: #c1edff;
  /* 출력 되는 문구의 글씨 굵기를 굵게 */
  font-weight: bold;
}

기본 테마에서 NoDataMessage: 3 적용

기본 테마에서 NoDataMessage: 3, NoDataMiddle: true 적용

커스텀 배경색 및 글자 굵기 적용

확인하기

---

편집 모드 스타일

.IBEditInput, .IBEditTextarea

.IBEditInput, .IBEditTextarea는 별도의 편집 기능을 가지는 Enum, Radio, Bool Type 외에 편집 모드 활성화 시 해당 셀의 데이터를 수정 가능한 Input 혹은 TextArea를 관리하는 클래스입니다.

.IBEditInput, .IBEditTextarea {
  /* 글자색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */
  color: yellow !important;
  /* 배경색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */
  background-color: green !important;
}

기본 테마의 편집 모드 활성화 시

커스텀 배경색 및 글자색 적용

확인하기

.IBEditCellBorder

.IBEditCellBorder는 편집 모드가 활성화 되었을 때, 해당 영역의 border를 관리하는 클래스입니다.

.IBEditCellBorder {
  /* border 색상 변경 */
  border-color: red;
}

기본 테마의 편집 모드 활성화 시

커스텀 Border 색 적용

확인하기