React 탭 개요

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

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

    React Tabs Example

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

    How to use Tabs with Ignite UI for React

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

    npm install igniteui-react

    사용하기IgrTabs 전에 다음과 같이 임포트해야 합니다:

    import { IgrTabs, IgrTab } from "igniteui-react";

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    간단한 선언은IgrTabs 다음과 같이 진행됩니다:

    <IgrTabs>
    <IgrTab label="Tab 1">
      <span>Panel 1</span>
    </IgrTab>
    <IgrTab label="Tab 2">
      <span>Panel 2</span>
    </IgrTab>
    <IgrTab label="Tab 3">
      <span>Panel 3</span>
    </IgrTab>
</IgrTabs>

    선택

    ​IgrTabs사용자가 키 누르기나 클릭으로 항목을 선택하면 이벤트가 발생합니다Change.select이 방법은 탭의 ID를 지정IgrTab 하여 탭을 선택할 수 있게 해줍니다.

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

    사용자가 화살표 키로 탐색할 때 탭을 선택하는 기본 동작은 이 속성으로activation 수정할 수 있습니다. 이 탭을 '로Manual 설정하면 화살표 키를 눌러야 다음/이전 탭에 초점이 맞춰지지만, 탭은 또는 또는 키를 눌러 SPACE 야만 선택됩니다 ENTER

    Disabled Tab

    탭은 다음 속성을 설정disabled 하여 비활성화할 수 있습니다:

    <IgrTab disabled={true}>Tab 1</IgrTab>

    Alignment

    이 특성은alignment React 탭의 위치를 제어합니다. 다음과 같은 값들을 수용합니다:

    • Start(기본값): 탭의 너비는 내용(라벨, 아이콘, 둘 다)에 따라 달라지며, 모든 탭은 동일한 파딩을 가집니다. 첫 번째 탭은 탭 컨테이너의 왼쪽에 정렬되어 있습니다.
    • Center: 탭의 너비는 내용에 따라 달라지며 탭 컨테이너의 중앙을 차지합니다.
    • End: 탭의 너비는 내용에 따라 다르며, 모든 탭은 동일한 패드를 가지고 있습니다. 마지막 탭은 탭 컨테이너의 오른쪽에 정렬되어 있습니다.
    • Justify: 모든 탭은 너비가 같고 탭 컨테이너에 완전히 맞습니다.

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

    Scrolling

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

    Keyboard Navigation

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

    Prefix / Suffix

    각 탭에는 아이콘을 표시하는 기본 슬롯이 있으며,prefix​suffix 시작 부분과 끝부분에 추가 콘텐츠를 표시하는 슬롯이 있습니다.

    Styling

    이 컴포넌트는IgrTabs 여러 CSS 파트를 노출하여 스타일을 완전히 제어할 수 있게 합니다:

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

    이 컴포넌트는IgrTab 다음과 같은 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);
}

    API Reference

    Additional Resources