Web Components 탭 개요

Web Components 탭은 가볍고 사용자 친화적인 구성 요소로, 해당 콘텐츠를 탭 형식이나 일반적으로 수평으로 배치된 탭 모음으로 구성합니다. Web Components 탭을 사용하면 최종 사용자가 쉽게 클릭하여 다양한 뷰를 표시할 수 있습니다. 탭 방향, 템플릿, 기본 제공 헤더 스타일, 애니메이션, 스크롤 버튼 등 여러 가지 기능과 사용자 지정 옵션이 있습니다.

Ignite UI for Web Components 탭은 유사한 데이터 세트를 구성하고 전환합니다. 탭은 데이터 콘텐츠의 맨 위에 배치됩니다. 탭을 선택하면 해당 컨텐츠가 표시됩니다.

Web Components 탭 예제

아래의 Web Components 탭 예제에서는 한 줄에 정렬된 세 개의 서로 다른 탭을 표시하여 각 탭을 빠르고 쉽게 탐색할 수 있습니다.

Ignite UI for Web Components와 함께 탭을 사용하는 방법

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents'; defineComponents(IgcTabsComponent);

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

간단한 IgcTabsComponent 선언은 다음과 같이 수행됩니다.

<igc-tabs> <igc-tab> <div slot="label">Tab 1</div> <span>Content for tab 1</span> </igc-tab> <igc-tab> <div slot="label">Tab 2</div> <span>Content for tab 2</span> </igc-tab> <igc-tab> <div slot="label">Tab 3</div> <span>Content for tab 3</span> </igc-tab> </igc-tabs>

선택

사용자가 IgcTabsComponent 키 누름 또는 클릭으로 항목을 선택할 때 이벤트를 발생시킵니다 Change. 이 select 방법을 사용하면 또는 해당 ID를 지정하여 IgcTabComponent 탭을 선택할 수 있습니다.

초기 로드 시 선택한 탭을 지정하지 않은 경우 비활성화되지 않은 첫 번째 탭이 선택됩니다.

사용자가 화살표 키를 사용하여 탐색할 때 탭을 선택하는 기본 동작은 activation 속성으로 수정할 수 있습니다. Manual으로 설정하면 화살표 키를 누를 때 다음/이전 탭에 초점이 맞춰지지만, 스페이스 나 Enter를 누른 후에만 탭이 선택됩니다.

비활성화된 탭

disabled 속성을 설정하면 탭이 비활성화됩니다.

<igc-tab disabled>Tab 1</igc-tab>

조정

이 alignment 속성은 탭 Web Components 배치되는 방식을 제어합니다. 다음 값을 허용합니다.

Start (기본값): 탭의 너비는 콘텐츠(레이블, 아이콘 모두)에 따라 다르며 모든 탭의 패딩은 동일합니다. 첫 번째 탭은 탭 컨테이너의 왼쪽에 정렬됩니다.
Center: 탭의 너비는 내용에 따라 다르며 탭 컨테이너의 중앙을 차지합니다.
End: 탭의 너비는 내용에 따라 다르며 모든 탭의 패딩은 동일합니다. 마지막 탭은 탭 컨테이너의 오른쪽에 정렬됩니다.
Justify: 모든 탭의 너비가 동일하고 탭 컨테이너에 완전히 맞습니다.

모든 탭을 수용할 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.

스크롤링

사용 가능한 공간이 모든 Web Components 탭을 렌더링하기에 충분하지 않을 때 스크롤 버튼이 표시됩니다. 첫 번째 탭이 표시되면 시작 스크롤 버튼이 비활성화됩니다. 각각 마지막 탭이 표시되면 끝 스크롤 버튼이 비활성화됩니다. 스크롤 버튼 중 하나를 누르면 탭이 스크롤되어 해당 방향의 탭이 완전히 표시되거나 이미 표시되어 있으면 해당 방향의 이전/다음 탭이 표시됩니다.

열쇠	설명
`←`	이전(오른쪽에서 왼쪽 모드에서는 다음) 탭을 선택합니다. 만약에`activation`로 설정되어 있습니다`Manual` 탭에만 초점을 맞춥니다. 첫 번째 탭에 있는 경우 끝까지 스크롤합니다.
`→`	다음(오른쪽에서 왼쪽 모드에서는 이전) 탭을 선택합니다. 만약에`activation`로 설정되어 있습니다`Manual` 탭에만 초점을 맞춥니다. 마지막 탭에 있는 경우 스크롤하여 시작합니다.
`집`	첫 번째 탭을 선택합니다.
`끝`	마지막 탭을 선택합니다.
`Enter` / `스페이스바`	다음과 같은 경우 포커스된 탭을 선택합니다.`activation` ~이다`Manual`

접두사 접미사

각 탭에는 정보(아이콘, 텍스트 또는 둘 다)를 표시하는 기본 슬롯과 시작 및/또는 끝 부분에 추가 콘텐츠를 표시하는 prefix 및 suffix 슬롯이 있습니다.

스타일링

구성 요소는 IgcTabsComponent 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있습니다.

이름	설명
`selected-indicator`	선택한 지표입니다.
`start-scroll-button`	탭이 넘칠 때 표시되는 스크롤 시작 버튼입니다.
`end-scroll-button`	탭이 넘칠 때 표시되는 스크롤 종료 버튼입니다.

IgcTabComponent 구성 요소는 다음 CSS 부분을 노출합니다.

이름	설명
`content`	탭 헤더의 레이블 슬롯 컨테이너입니다.
`prefix`	탭 헤더의 레이블 접두사입니다.
`suffix`	탭 헤더의 레이블 접미사입니다.
`tab-header`	단일 탭의 헤더입니다.
`tab-body`	단일 탭의 본문 내용을 보유하며, 선택한 탭의 본문만 표시됩니다.

igc-tab::part(tab-header) { background-color: var(--ig-gray-200); } igc-tab::part(content) { color: var(--ig-success-500); }