Grid — Angular | Spec-Zone.ru

Контейнер для сетки. Он обеспечивает навигацию с помощью клавиатуры и управление фокусом для строк и ячеек сетки. Он управляет общим поведением сетки, включая циклический переход фокуса, выделение и отключённые состояния.

API

class Grid implements OnDestroy {
  readonly element: HTMLElement;
  readonly textDirection: WritableSignal<Direction>;
  readonly @Input() enableSelection: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">;
  readonly @Input() rowWrap: InputSignal<"continuous" | "loop" | "nowrap">;
  readonly @Input() colWrap: InputSignal<"continuous" | "loop" | "nowrap">;
  readonly @Input() multi: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() selectionMode: InputSignal<"follow" | "explicit">;
  readonly @Input('tabindex') tabIndex: InputSignal<undefined>;
  readonly activeDescendant: Signal<any>;
  scrollActiveCellIntoView(options?: ScrollIntoViewOptions): void;
}

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

InputSignal<undefined>

Значение tabindex для сетки.

activeDescendant

Signal<any>

Идентификатор активного дочернего элемента сетки.

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>

Сетка

API

Описание