• 개요
@angular/aria/tabs

TabList

디렉티브

TabList 컨테이너입니다.

API

    
      class TabList implements OnInit ,OnDestroy {}

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

Tab | undefined
@paramvaluestring | undefined
@returnsTab | undefined

설명

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>
상세 내용으로 이동