Web Components 탭 개요

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

    Ignite UI for Web Components 유사한 데이터 세트를 구성하고 전환합니다. 탭은 데이터 콘텐츠 상단에 배치됩니다. 탭을 선택하면 해당 ID가 있는 패널이 표시됩니다. 구성 요소는 정의된 탭(패널 없이)과 함께 사용할 수 있습니다.

    Web Components Tabs Example

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

    How to use Tabs with 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 panel="first">Tab 1</igc-tab>
    <igc-tab panel="second">Tab 2</igc-tab>
    <igc-tab panel="third">Tab 3</igc-tab>
    <igc-tab-panel id="first">Panel 1</igc-tab-panel>
    <igc-tab-panel id="second">Panel 2</igc-tab-panel>
    <igc-tab-panel id="third">Panel 3</igc-tab-panel>
</igc-tabs>

    선택

    ​IgcTabsComponent는 사용자가 키를 누르거나 클릭하여 항목을 선택할 때 Change 이벤트를 발생시킵니다. select 메소드를 사용하면 해당 패널을 문자열 값으로 지정하여 탭을 선택할 수 있습니다.

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

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

    Disabled Tab

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

    <igc-tab panel="first" disabled>Tab 1</igc-tab>

    Alignment

    ​alignment 속성은 Web Components 탭의 위치를 제어합니다. 다음 값을 허용합니다.

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

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

    Scrolling

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

    Keyboard Navigation

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

    Prefix / Suffix

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

    Styling

    ​IgcTabsComponent 구성 요소는 모든 요소에 대한 CSS 부분을 노출합니다.

    이름 설명
    headers 탭과 스크롤 버튼을 포함하는 래퍼입니다.
    headers-content 탭 렌더링에 사용 가능한 공간을 나타내는 탭 컨테이너입니다.
    headers-wrapper 탭 및 선택된 표시기에 대한 래퍼입니다.
    headers-scroll 탭의 컨테이너입니다.
    selected-indicator 선택한 지표입니다.
    start-scroll-button 탭이 넘칠 때 표시되는 스크롤 시작 버튼입니다.
    end-scroll-button 탭이 넘칠 때 표시되는 스크롤 종료 버튼입니다.
    content 데이터가 표시되는 콘텐츠의 컨테이너입니다.

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

    이름 설명
    base 탭 헤더의 기본 래퍼입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼. 
    igc-tabs::part(selected-indicator) {
    background: #ecaa53;
}

igc-tab::part(base) {
    background: #ffe6cc;
}

    API Reference

    Additional Resources