Angular Tabs 구성 요소 개요

    Ignite UI for Angular 모든 기능을 갖춘 사용자 인터페이스 구성 요소로, 주요 목적은 단일 탭 뷰에서 관련 콘텐츠를 구성하고 그룹화하여 공간을 절약하고 콘텐츠를 더 이해하기 쉽게 만드는 것입니다. 애니메이션, 템플릿, 사용자 정의 옵션 등과 같은 다양한 기능이 포함되어 있습니다.

    Angular의 탭은 많은 양의 콘텐츠를 카테고리별로 분류하고 간결하고 공간 효율적인 방식으로 표시해야 하는 웹 페이지를 구축할 때 매우 유용합니다.

    Ignite UI for Angular의 igx-tabs 구성 요소는 유사한 데이터 세트를 구성하거나 전환하는 데 사용됩니다. 이는 각각 데이터 컨테이너와 탭 헤더를 나타내는 igx-tab-item의 래퍼 역할을 합니다. Angular Tabs 구성 요소는 탭을 맨 위에 배치하고 화면에 여러 탭 항목이 있는 경우 스크롤을 허용합니다.

    Angular 탭 예제

    이것은 한 번에 하나의 뷰만 볼 수 있는 다른 탭 안에 하나의 탭이 있는 Angular 중첩 탭의 기본적인 예입니다. Angular에서 중첩 탭을 사용하면 더 나은 구조화된 방식으로 정보를 표시할 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Ignite UI for Angular 시작하기

    Ignite UI for Angular Tabs 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular
cmd

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 IgxTabsModule 당신의 app.module.ts 파일.

    // app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';
// import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTabsModule],
    ...
})
export class AppModule {}
typescript

    또는 16.0.0부터 IgxTabsComponent 독립 실행형 종속성으로 가져오거나 IGX_TABS_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

    // home.component.ts

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tabs>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 1 content.
        </igx-tab-content>
      </igx-tab-item>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 2</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 2 content.
        </igx-tab-content>
      </igx-tab-item>
    </igx-tabs>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TABS_DIRECTIVES]
    /* or imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective] */
})
export class HomeComponent {}
typescript

    이제 Ignite UI for Angular Tabs 모듈이나 지침을 가져왔으므로 igx-tabs 구성 요소를 사용할 수 있습니다.

    Angular 탭 사용

    ​igx-tab-header에 콘텐츠를 제공하여 Angular Tabs 헤더를 설정합니다. 탭의 이름을 설정하려면 igxTabHeaderLabel 지시문으로 span을 추가하기만 하면 됩니다. 탭 항목의 콘텐츠로 나타날 콘텐츠는 igx-tab-content 태그 사이에 추가해야 합니다.

    <igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 1</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 1 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 2</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 2 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 3</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 3 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 4</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 4 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 5</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 5 content.
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>
html

    샘플이 올바르게 구성되면 최종 결과는 다음과 같습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Angular 탭 정렬

    IgxTabs ​ ​tabAlignment 입력 속성은 탭 위치 및 정렬 방법을 제어합니다. 시작, 중심, 끝 및 양쪽 맞춤의 네 가지 값을 허용합니다.

    • 시작 (기본값): 탭 헤더의 너비는 콘텐츠(레이블, 아이콘 모두)에 따라 다르며 모든 탭의 패딩은 동일합니다. 첫 번째 탭은 탭 컨테이너 왼쪽에 정렬됩니다.
    • Center: 탭 헤더의 너비는 내용에 따라 다르며 탭 컨테이너 센터를 차지합니다. 모든 항목을 담을 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.
    • End: 탭 헤더의 너비는 내용에 따라 다르며 모든 탭의 패딩은 동일합니다. 마지막 탭은 탭 컨테이너 오른쪽에 정렬됩니다.
    • 양쪽 맞춤: 모든 탭 헤더의 너비가 동일하고 탭 컨테이너에 완전히 맞습니다. 모든 항목을 담을 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.

    아래 샘플은 속성 값 간에 tabAlignment 전환할 때 탭이 정렬되는 방법을 보여줍니다.

    EXAMPLE
    TS
    HTML
    Edit in:

    Angular 탭 사용자 정의

    ​igxTabHeaderIcon 지시문을 사용하여 아이콘을 포함하여 탭을 수정하고 더욱 매력적으로 만들어 보겠습니다. igx-tabs 구성 요소는 머티리얼 디자인 아이콘과 호환되므로 애플리케이션에 적용하기가 매우 쉽습니다.

    아직 사용하지 않으셨다면 igx-icon 지금까지의 애플리케이션에서 IgxIconModule에서 app.module.ts 계속하기 전에.

    먼저, 메인 애플리케이션 폴더의 'styles.scss' 파일에 머티리얼 아이콘을 추가하세요. 다음으로, igxTabHeaderIcon 지시어 세트와 함께 igx-icon​ ​igx-tab-header의 하위 항목으로 추가합니다.

    // styles.scss

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
css
    <igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>library_music</igx-icon>
        <span igxTabHeaderLabel>Albums</span>
    </igx-tab-header>
    <igx-tab-content>
        Albums
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>favorite</igx-icon>
        <span igxTabHeaderLabel>Favorite</span>
    </igx-tab-header>
    <igx-tab-content>
        Favorite
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>info</igx-icon>
        <span igxTabHeaderLabel>Details</span>
    </igx-tab-header>
    <igx-tab-content>
        Details
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

html

    샘플이 올바르게 구성되면 탭은 다음 예와 같아야 합니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    라벨과 아이콘을 설정하는 것만으로는 충분하지 않은 경우 igx-tab-header 태그 사이에 직접 사용자 정의 콘텐츠를 제공할 수도 있습니다.

    <igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <!-- your custom tab content goes here -->
      <div>
        <img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
             width="80px" height="40px">
      </div>
    </igx-tab-header>
    <igx-tab-content>
      <h1>IgniteUI Rocks!</h1>
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>
html

    ​igxPrefix 및 igxSuffix 지시문을 사용하여 사용자 정의 탭 헤더의 접두사와 접미사를 간단히 추가할 수도 있습니다. 아래 샘플은 사용자 정의 헤더 내용과 접두사/접미사가 포함된 탭을 추가하는 방법을 보여줍니다.

    EXAMPLE
    TS
    HTML
    Edit in:

    라우터 콘센트 컨테이너와 통합

    ​igx-tabs 구성 요소는 각 탭 항목에 대해 지정된 콘텐츠가 있는 탭 목록으로 사용하기 위한 것이지만 콘텐츠가 탭 콘텐츠와 별개인 탭 항목을 정의해야 하는 경우가 있을 수 있습니다.

    탭 항목을 정의할 때 지시문을 적용할 수 있습니다. 예를 들어, 이 기능을 사용하여 Angular Router를 사용하여 뷰 간 탐색을 수행할 수 있습니다. 다음 예에서는 igx-tabs 구성 요소를 구성하여 단일 라우터 아웃렛에서 세 구성 요소 간에 전환하는 방법을 보여줍니다.

    시작하려면 igx-tabs 구성 요소를 보관할 구성 요소와 데모용 일부 콘텐츠가 포함된 세 개의 보기 구성 요소가 필요합니다. 단순화를 위해 뷰 구성 요소에는 매우 짧은 템플릿이 있습니다.

    import { Component } from '@angular/core';

@Component({
    selector: 'app-tabs-routing',
    styleUrls: ['tabs-routing.component.scss'],
    templateUrl: 'tabs-routing.component.html'
})
export class TabsRoutingComponent { }

@Component({
    template: '<p>Tab 1 Content</p>'
})
export class TabsRoutingView1Component { }

@Component({
    template: '<p>Tab 2 Content</p>'
})
export class TabsRoutingView2Component { }

@Component({
    template: '<p>Tab 3 Content</p>'
})
export class TabsRoutingView3Component { }
typescript

    다음으로 app-routing.module.ts 파일에 적절한 탐색 매핑을 만듭니다.

    import { RouterModule, Routes } from '@angular/router';

import {
    TabsRoutingComponent,
    TabsRoutingView1Component,
    TabsRoutingView2Component,
    TabsRoutingView3Component
} from './tabs-routing.component';

...

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/tabs-routing'
  },
  {
    path: 'tabs-routing',
    component: TabsRoutingComponent,
    children: [
        { path: 'view1', component: TabsRoutingView1Component },
        { path: 'view2', component: TabsRoutingView2Component },
        { path: 'view3', component: TabsRoutingView3Component },
      ]
  }
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(appRoutes)]
})
export class AppRoutingModule { }
typescript

    이제 모든 탐색 경로가 설정되었으므로 igx-tabs 구성 요소를 선언하고 라우팅을 위해 구성해야 합니다. 뷰 구성 요소를 렌더링하기 위한 라우터 출력을 추가해야 합니다.

    <!-- tabs-routing.component.html -->

<igx-tabs #tabs1>
  <igx-tab-item
      routerLinkActive
      #rla1="routerLinkActive"
      [selected]="rla1.isActive"
  >
      <igx-tab-header routerLink="view1">
          <span igxTabHeaderLabel>Tab 1</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla2="routerLinkActive"
      [selected]="rla2.isActive"
  >
      <igx-tab-header routerLink="view2">
          <span igxTabHeaderLabel>Tab 2</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla3="routerLinkActive"
      [selected]="rla3.isActive"
  >
      <igx-tab-header routerLink="view3">
          <span igxTabHeaderLabel>Tab 3</span>
      </igx-tab-header>
  </igx-tab-item>
</igx-tabs>

<router-outlet></router-outlet>
html

    위 코드는 세 개의 탭 항목이 있는 igx-tabs 구성 요소를 생성합니다. 각 탭 항목의 헤더에는 탐색에 사용되는 라우팅 링크를 지정하는 데 사용되는 RouterLink 지시어가 적용되어 있습니다. 링크 중 하나라도 활성화되면 RouterLinkActive 지시문의 isActive 속성에 대한 바인딩으로 인해 해당 탭 항목에 selected 속성이 설정됩니다. 이렇게 하면 선택한 탭 항목이 항상 현재 URL 경로와 동기화됩니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    routerLink 지시어는 igx-tab-header​ ​igx-tab-item header 에 설정되어 있습니다.

    스타일

    탭 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 테마 모듈을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    가장 간단한 접근 방식에 따라 확장하는 tabs-theme 새 테마를 만듭니다. and $item-active-color와 같은 $item-background 몇 가지 기본 매개 변수만 전달하면 최소한의 노력으로 탭의 스타일을 지정할 수 있습니다. 테마는 다양한 상호 작용 상태에 필요한 모든 배경 및 전경색을 자동으로 생성합니다.

    물론 추가 매개 변수를 재정의하여 모양을 더 세밀하게 조정할 수 있습니다.

    $dark-tabs: tabs-theme(
  $item-background: #292826,
  $item-active-color: #F4D45C,
);
scss

    우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

    ​tabs-theme 살펴보면 탭 스타일을 지정하기 위해 사용할 수 있는 속성이 훨씬 더 많다는 것을 알 수 있습니다.

    탭 콘텐츠의 일부로 사용되는 구성 요소의 스타일을 지정하려면 해당 구성 요소에 특정한 추가 테마를 만들어야 합니다.

    마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

    @include css-vars($dark-tabs);
scss

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API 참조

    테마 종속성

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.