[]
        
(Showing Draft Content)

FlexGrid의 Selection와 Focus

'wj-state-focused' 의사 클래스를 사용하여 FlexGrid 컨트롤에 대한 접근성을 개선할 수 있습니다.

예를 들어 아래 코드는 포커스가 없을 때 선택 영역을 회색으로 표시하고, 그리드에 포커스가 있을 때 선택한 셀에 주황색 윤곽선을 추가합니다.

/* style the cell that has focus */
.wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected {
    border: 2px solid orange;
    transition: all 100ms;
}

/* de-emphasize selected cells when the grid doesn't contain the focus */
.wj-flexgrid:not(.wj-state-focused) .wj-state-selected,
.wj-flexgrid:not(.wj-state-focused) .wj-state-multi-selected {
  background: #ddd;
	color: black;
}