@angular/aria/grid

Grid

디렉티브

그리드를 담는 컨테이너입니다. 그리드의 행과 셀에 키보드 탐색과 포커스 관리 기능을 제공합니다. 포커스 순환, 선택, 비활성화 상태 등 그리드의 전반적인 동작을 관리합니다.

API

    
      class Grid implements OnDestroy {}

element

HTMLElement

호스트 엘리먼트에 대한 참조입니다.

textDirection

WritableSignal<Direction>

텍스트 방향입니다.

enableSelection

InputSignalWithTransform<boolean, unknown>

그리드에서 선택 기능을 사용할지 지정합니다.

disabled

InputSignalWithTransform<boolean, unknown>

그리드의 비활성화 여부입니다.

softDisabled

InputSignalWithTransform<boolean, unknown>

비활성화된 항목이 포커스를 받을 수 있는지 지정합니다. true이면 비활성화된 항목도 포커스를 받을 수 있지만 상호작용할 수는 없습니다. false이면 탐색할 때 비활성화된 항목을 건너뜁니다.

focusMode

InputSignal<"roving" | "activedescendant">

그리드에서 사용하는 포커스 전략입니다.

roving: tabindex를 사용하여 활성 셀로 포커스를 이동합니다.
activedescendant: 포커스를 그리드 컨테이너에 유지하고 aria-activedescendant로 활성 셀을 나타냅니다.

rowWrap

InputSignal<"continuous" | "loop" | "nowrap">

행 축을 따라 키보드로 탐색할 때의 순환 동작입니다.

continuous: 마지막 행에서 첫 번째 행으로, 첫 번째 행에서 마지막 행으로 순환합니다.
loop: 현재 행 안에서 순환합니다.
nowrap: 행의 첫 번째 또는 마지막 항목에서 탐색을 멈춥니다.

colWrap

InputSignal<"continuous" | "loop" | "nowrap">

열 축을 따라 키보드로 탐색할 때의 순환 동작입니다.

continuous: 마지막 열에서 첫 번째 열로, 첫 번째 열에서 마지막 열로 순환합니다.
loop: 현재 열 안에서 순환합니다.
nowrap: 열의 첫 번째 또는 마지막 항목에서 탐색을 멈춥니다.

multi

InputSignalWithTransform<boolean, unknown>

그리드에서 여러 셀을 선택할 수 있는지 지정합니다.

selectionMode

InputSignal<"follow" | "explicit">

그리드에서 사용하는 선택 전략입니다.

follow: 포커스를 받은 셀이 자동으로 선택됩니다.
explicit: 사용자가 클릭하거나 스페이스바를 누르는 등의 방법으로 셀을 명시적으로 선택합니다.

tabIndex

InputSignalWithTransform<number | undefined, string | number | undefined>

그리드의 tabindex입니다.

activeDescendant

Signal<string | undefined>

그리드의 활성 자손 ID입니다.

ngOnDestroy

void

@returnsvoid

scrollActiveCellIntoView

void

활성 셀이 보이도록 스크롤합니다.

@paramoptionsScrollIntoViewOptions

@returnsvoid

설명

<table ngGrid [multi]="true" [enableSelection]="true">
  @for (row of gridData; track row) {
    <tr ngGridRow>
      @for (cell of row; track cell) {
        <td ngGridCell [disabled]="cell.disabled">
          {{cell.value}}
        </td>
      }
    </tr>
  }
</table>