Web Components 탭 개요

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

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

    Web Components 탭 예제

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

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

    npm install igniteui-webcomponents
cmd
    import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);
ts

    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>
html

    선택

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

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

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

    비활성화된 탭

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

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

    조정

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    스크롤링

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    키보드 탐색

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

    접두사 접미사

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA 배너

    스타일링

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

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

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

    이름 설명
    content 콘텐츠 래퍼입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼. 
    igc-tabs::part(headers-content) {
  background-color: var(--ig-gray-200);
}

igc-tab::part(content) {
  color: var(--ig-success-500);
}
css

    EXAMPLE
    Edit in:

    API 참조

    추가 리소스