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 시작하기

    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:

    App Builder | CTA 배너

    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 확장하고 탭 그룹의 스타일을 지정할 수 있는 다양한 속성을 허용하는 새로운 테마를 만듭니다.

    $dark-tabs: tabs-theme(
  $item-text-color: #f4d45c,
  $item-background: #292826,
  $item-hover-background: #f4d45c,
  $item-hover-color: #292826,
  $item-active-color: #f4d45c,
  $item-active-icon-color: #f4d45c,
  $indicator-color: #f4d45c,
  $tab-ripple-color: #f4d45c
);
scss

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

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

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

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

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

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API 참조

    테마 종속성

    추가 리소스

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