React 탭 개요

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

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

React 탭 예시

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabsModule, IgrTabs, IgrTab,  IgrTabPanel, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

IgrTabsModule.register();
IgrIconModule.register();

export default class Overview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }


  public render(): JSX.Element {
    return (
      <div className="container sample">        
        <IgrTabs key="tabs">
          <IgrTab panel="home" key="home-tab">
            <span key="home-icon"><IgrIcon ref={this.iconRef} name='home' collection="material"></IgrIcon></span>            
          </IgrTab>
          <IgrTab panel="search" key="search-tab">
             <span key="search-icon"><IgrIcon ref={this.iconRef} name='search' collection="material"></IgrIcon></span>           
          </IgrTab>
          <IgrTab panel="favorite" key="favorite-tab">
             <span key="favorite-icon"><IgrIcon ref={this.iconRef} name='favorite' collection="material"></IgrIcon></span>            
          </IgrTab>
           <IgrTabPanel id="home" key="basics-panel"><span key="home-panel">Home tab panel</span></IgrTabPanel>
          <IgrTabPanel id="search" key="search-panel"><span key="search-panel">Search tab panel</span></IgrTabPanel>
          <IgrTabPanel id="favorite" key="favorite-panel"><span key="favorite-panel">Favorite tab panel</span></IgrTabPanel>        
        </IgrTabs>
      </div>
    );
  }

  public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
        icon.registerIconFromText("home", home, "material");
        icon.registerIconFromText("search", search, "material");
        icon.registerIconFromText("favorite", favorite, "material");
        
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Overview/>);

tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

Ignite UI for React에서 탭을 사용하는 방법

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

npm install igniteui-react
cmd

사용하기 전에 다음과 같이 등록해야 합니다. IgrTabs​

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

IgrTabsModule.register();
tsx

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

단순 IgrTabs 선언은 다음과 같이 수행됩니다.

<IgrTabs>
    <IgrTab panel="first">Tab 1</IgrTab>
    <IgrTab panel="second">Tab 2</IgrTab>
    <IgrTab panel="third">Tab 3</IgrTab>
    <IgrTabPanel id="first">Panel 1</IgrTabPanel>
    <IgrTabPanel id="second">Panel 2</IgrTabPanel>
    <IgrTabPanel id="third">Panel 3</IgrTabPanel>
</IgrTabs>
tsx

선택

​IgrTabs 사용자가 키 누름 또는 클릭으로 항목을 선택할 때 이벤트를 내보냅니다 Change. 이 select 방법을 사용하면 패널을 문자열 값으로 지정하여 탭을 선택할 수 있습니다.

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

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

비활성화된 탭

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

<IgrTab panel="first" disabled={true}>Tab 1</IgrTab>
tsx

조정

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

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

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabsModule, IgrTabs, IgrTab,  IgrTabPanel, IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule, } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

IgrTabsModule.register();
IgrRadioModule.register();
IgrRadioGroupModule.register();

export default class Alignment extends React.Component<any, any> {

    private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.tabsRef = this.tabsRef.bind(this);
        this.onRadioChange = this.onRadioChange.bind(this);
    }


  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrRadioGroup alignment="horizontal" key="radio-group" >
            <IgrRadio name="alignment" value="start" checked={true} key="start" change={this.onRadioChange}><span key="radio-span-0">Start</span></IgrRadio>
            <IgrRadio name="alignment" value="center" key="center" change={this.onRadioChange}><span key="radio-span-1">Center</span></IgrRadio>
            <IgrRadio name="alignment" value="end" key="end" change={this.onRadioChange}><span key="radio-span-2">End</span></IgrRadio>
            <IgrRadio name="alignment" value="justify" key="justify" change={this.onRadioChange}><span key="radio-span-3">Justify</span></IgrRadio>
        </IgrRadioGroup>
        <IgrTabs ref={this.tabsRef} key="tabs">
          <IgrTab panel="basics" key="basics-tab">
            <span key="basics-tab-span">Basics</span>
          </IgrTab>
          <IgrTab panel="details" key="details-tab">
            <span key="details-tab-span">Details</span>
          </IgrTab>
          <IgrTab panel="custom" key="custom-tab">
            <span key="custom-tab-span">Custom</span>
          </IgrTab>
          <IgrTab panel="disabled" disabled={true} key="disabled-tab">
            <span key="disabled-tab-span">Disabled</span>
          </IgrTab>
           <IgrTabPanel id="basics" key="basics-panel"><span key="basics-panel-span">Basics tab panel</span></IgrTabPanel>
          <IgrTabPanel id="details" key="details-panel"><span key="details-panel-span">Details tab panel</span></IgrTabPanel>
          <IgrTabPanel id="custom" key="custom-panel"><span key="custom-panel-span">Custom tab panel</span></IgrTabPanel>
          <IgrTabPanel id="disabled" key="disabled-panel"><span key="disabled-panel-span">Disabled tab panel will not be displayed</span></IgrTabPanel>
        </IgrTabs>
      </div>
    );
  }

  public onRadioChange(e: any) {
       this.tabs.alignment = e.value;      
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Alignment />);

tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

스크롤링

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabsModule, IgrTabs, IgrTab,  IgrTabPanel} from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

IgrTabsModule.register();

export default class Scrolling extends React.Component<any, any> {

    private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.tabsRef = this.tabsRef.bind(this);
        this.onRadioChange = this.onRadioChange.bind(this);
    }


  public render(): JSX.Element {
    return (
      <div className="container vertical">        
        <IgrTabs ref={this.tabsRef} key="tabs">          
           {Array.from({length: 18}, (_, index) => index + 1).map(number => (
            <React.Fragment key={`tab-${number}`}>
            <IgrTab panel={`tab-${number}`} key={`tab-${number}`}>
              <span key={`tab-${number}-span`}>Tab {number}</span>
            </IgrTab>
            <IgrTabPanel id={`tab-${number}`} key={`tab-${number}-panel`}>
              <span key={`panel-${number}-span`}>Tab {number} panel</span>
            </IgrTabPanel>
          </React.Fragment>
          ))}
        </IgrTabs>
      </div>
    );
  }

  public onRadioChange(e: any) {
       this.tabs.alignment = e.value;      
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Scrolling />);

tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

키보드 탐색

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

접두사 접미사

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabsModule, IgrTabs, IgrTab,  IgrTabPanel, IgrIcon, IgrIconModule, IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

IgrTabsModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

export default class PrefixSuffix extends React.Component<any, any> {

  private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }    

    constructor(props: any) {
        super(props);

        this.tabsRef = this.tabsRef.bind(this);
        this.onCloseClicked = this.onCloseClicked.bind(this);

         this.state = {
          tabs: ['Home','Search', 'Favorite']
        };
    }

  public render(): JSX.Element {
    return (
      <div className="container sample">        
        <IgrTabs key="tabs" ref={this.tabsRef}>
          {this.state.tabs.map((tab:string, index:number) => (
                        <IgrTab panel={tab.toLowerCase()} key={`${tab.toLowerCase()}-tab`}>
                            <span key={`${tab.toLowerCase()}-icon-span`} slot="prefix"><IgrIcon ref={this.iconRef} name={tab.toLowerCase()} collection="material"></IgrIcon></span>
                            <span key={`${tab.toLowerCase()}-span`}>{tab}</span>
                            <span key={`${tab.toLowerCase()}-iconButton-span`} slot="suffix"><IgrIconButton name='close' collection="material" variant="flat" clicked={() => this.onCloseClicked(index)}></IgrIconButton></span>
                        </IgrTab>
                    ))}
                    {this.state.tabs.map((tab:string) => (
                        <IgrTabPanel id={tab.toLowerCase()} key={`${tab.toLowerCase()}-panel`}><span key={`${tab.toLowerCase()}-panel-span`}>{tab} tab panel</span></IgrTabPanel>
                    ))}
        </IgrTabs>
      </div>
    );
  }

  public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
         const close = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
        icon.registerIconFromText("home", home, "material");
        icon.registerIconFromText("search", search, "material");
        icon.registerIconFromText("favorite", favorite, "material");
        icon.registerIconFromText("close", close, "material");        
    }

    public onCloseClicked(index:number) {
        const updatedTabs = [...this.state.tabs];
        updatedTabs.splice(index, 1);
        this.setState({ tabs: updatedTabs }); 
  } 

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<PrefixSuffix/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.sample {
    --ig-size: var(--ig-size-small);
}
cssコピー

Edit in: Codesandbox

스타일링

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

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

구성 IgrTab 요소는 다음과 같은 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: Codesandbox

API 참조

• IgrTabs
• IgrTab
• IgrTabPanel
• IgrIcon
• IgrIconButton
• IgrRadioGroup
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub