TabList — Angular | Spec-Zone.ru

Контейнер TabList.

API

class TabList implements OnInit ,OnDestroy {
  readonly element: HTMLElement;
  readonly @Input() orientation: InputSignal<"vertical" | "horizontal">;
  readonly textDirection: WritableSignal<Direction>;
  readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">;
  readonly @Input() selectionMode: InputSignal<"follow" | "explicit">;
  readonly @Input() @Output('selectedTabChange') selectedTab: ModelSignal<string | undefined>;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  open(value: string): boolean;
  findTab(value?: string | undefined): any;
}

element

HTMLElement

Ссылка на корневой элемент.

orientation

InputSignal<"vertical" | "horizontal">

Вертикальная или горизонтальная ориентация списка вкладок.

textDirection

WritableSignal<Direction>

Направление текста.

wrap

InputSignalWithTransform<boolean, unknown>

Следует ли перемещать фокус по кругу при навигации.

softDisabled

InputSignalWithTransform<boolean, unknown>

Разрешено ли получать фокус отключенным элементам. Когда true, отключенные элементы могут получать фокус, но не являются интерактивными. Когда false, отключенные элементы пропускаются при навигации.

focusMode

InputSignal<"roving" | "activedescendant">

Стратегия управления фокусом, используемая списком вкладок.

roving: фокус перемещается на активную вкладку с помощью tabindex.
activedescendant: фокус остается на контейнере списка вкладок, а для обозначения активной вкладки используется aria-activedescendant.

selectionMode

InputSignal<"follow" | "explicit">

Стратегия выбора, используемая списком вкладок.

follow: вкладка, на которой находится фокус, выбирается автоматически.
explicit: пользователь выбирает вкладки явно (например, щелчком мыши или нажатием пробела).

selectedTab

ModelSignal<string | undefined>

Текущая выбранная вкладка в виде входного параметра модели.

disabled

InputSignalWithTransform<boolean, unknown>

Отключен ли список вкладок.

ngOnInit

void

@returnsvoid

ngOnDestroy

void

@returnsvoid

open

boolean

Открывает панель вкладки с указанным значением.

@paramvaluestring

@returnsboolean

findTab

any

@paramvaluestring | undefined

@returnsany

Описание

Контейнер TabList.

Директива ngTabList управляет списком элементов ngTab. Она отвечает за навигацию с помощью клавиатуры, выбор и общую ориентацию вкладок. Ее следует размещать внутри контейнера ngTabs.

<ul ngTabList [(selectedTab)]="mySelectedTab" orientation="horizontal" selectionMode="explicit">
  <li ngTab value="first">First Tab</li>
  <li ngTab value="second">Second Tab</li>
</ul>