Focus, Hover, Select에 따른 스타일 적용

포커스 영역

시트에서 Focus 시, Focus 된 셀은 FocusCell로, 해당 행에서 그 외의 영역은 FocusRow로 나뉘어집니다.

.IBFocusCellBorder

.IBFocusCellBorder은 Focus 된 Cell의 Border를 관리하는 클래스입니다.

.IBFocusCellBorder {
  /* border 색상 변경 */
  border: 2px solid #ec5151;
}

기본 테마의 Focus 행

커스텀 Focus Cell Border

확인하기

.IBFocusRowBackground

.IBFocusRowBackground은 Focus 된 행에 배경색을 관리하는 클래스입니다.

.IBFocusRowBackground {
  /* 포커스 행 배경색 변경 */
  background-color: #ba37e333;
}

기본 테마의 Focus 행

커스텀 Focus Row Background

확인하기

.IBFocusRowBorder

.IBFocusRowBorder은 Focus 된 행에 출력 되는 Border를 관리하는 클래스입니다.

.IBFocusRowBorder {
  /* border 두께  색상 변경 */
  border: 2px solid #ff8500;
}

기본 테마의 Focus 행

커스텀 Focus Row Border

확인하기

---

Hover 행, 셀

시트에서 Hover 시, Hover 된 셀은 HoverCell로, 해당 행에서 그 외의 영역은 HoverRow로 나뉘어집니다.

.IBColorHoveredCell

.IBColorHoveredCell은 Hover 된 셀의 배경색을 관리하는 클래스입니다.

시트 생성 시점에 해당 클래스의 정보를 읽어 Hover 된 셀의 배경색에 적용됩니다. 시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다.

예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다.

.IBColorHoveredCell {
  /* 배경색 변경 */
  background-color: #ffaffb !important;
}

기본 테마의 Hover 행

커스텀 Hover Cell Background

확인하기

.IBHoverCellBorder

.IBHoverCellBorder은 Hover 된 셀의 Border를 관리하는 클래스입니다.

.IBHoverCellBorder {
  /* border 두께 및 색상 변경 */
  border: 2px solid #f81313;
}

기본 테마의 Hover 행

커스텀 Hover Cell Border

확인하기

.IBHoverRowBackground

.IBHoverRowBackground은 Hover 된 행의 배경색을 관리하는 클래스입니다.

.IBHoverRowBackground {
  /* 배경색 변경 */
  background: #5a19ff1a;
}

기본 테마의 Hover 행

커스텀 Hover Row Background

확인하기

.IBHoverRowBorder

.IBHoverRowBorder은 Hover 된 행에 출력 되는 Border를 관리하는 클래스입니다.

.IBHoverRowBorder {
  /* border 두께 및 색상 변경 */
  border: 2px solid #ae59ff;
}

기본 테마의 Hover 행

커스텀 Hover Row Border

확인하기

---

선택(Select) 영역

.IBColorSelected,.IBColorSelectedCell

.IBColorSelected,.IBColorSelectedCell은 시트 생성 시점에 해당 클래스의 정보를 읽어 선택(Selct)된 영역에 해당하는 셀에 배경색을 적용됩니다.

시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다.

예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다.

.IBColorSelected,.IBColorSelectedCell {
  /* 배경색 변경 */
  background-color: #dcbdff;
}

기본 테마의 Selected

커스텀 Selected

확인하기