Angular 탭 구성 요소 개요

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

Angular의 탭은 카테고리에 맞춰 간결하고 공간 효율적인 방식으로 표시되어야 하는 많은 콘텐츠가 포함된 웹 페이지를 구축할 때 매우 유용합니다.

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

Angular Tabs Example

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

Getting Started with Ignite UI for Angular Tabs

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

ng add igniteui-angular

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 {}

또는 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 {}

이제 Ignite UI for Angular 모듈 또는 지시문을 가져왔으므로 igx-tabs 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Tabs

​igx-tab-header에 콘텐츠를 제공하여 Angular Tabs 헤더를 설정했습니다. 탭 이름을 설정하려면 igxTabHeaderLabel 지시어를 사용하여 범위를 추가하기만 하면 됩니다. 탭 항목의 콘텐츠로 표시되는 모든 콘텐츠는 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>

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

Angular Tabs Alignment

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

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

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

Customizing Angular Tabs

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

Note

아직 사용하지 않으셨다면 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');
...

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

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

라벨과 아이콘을 설정하는 것만으로는 충분하지 않은 경우 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>

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

Integration With Router Outlet Container

​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 { }

다음으로 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 { }

이제 모든 탐색 경로가 설정되었으므로 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>

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

Note

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

Styles

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

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

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

가장 간단한 접근 방식에 따라 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
);

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

Note

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

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

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

IE 11과 같이 CSS 변수를 지원하지 않는 브라우저를 대상으로 하는 경우 테마 구성 요소 믹스인을 사용하여 기본 테마를 덮어쓸 수 있습니다.

:host {
  ::ng-deep {
    @include tabs($dark-tabs);
  }
}

Palettes & Colors

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$yellow-color: #F4D45C;
$black-color: #292826;

$dark-palette: palette(
  $primary: $black-color,
  $secondary: $yellow-color,
  $grays: #fff
);

​igx-color 사용하면 팔레트에서 어떤 색상이든 쉽게 검색할 수 있습니다.

$dark-tabs: tabs-theme(
    $palette: $dark-palette,
    $item-text-color: color($dark-palette, "secondary", 400),
    $item-background: color($dark-palette, "primary", 400),
    $item-hover-background: color($dark-palette, "secondary", 400),
    $item-hover-color: color($dark-palette, "primary", 400),
    $item-active-color: color($dark-palette, "secondary", 400),
    $item-active-icon-color: color($dark-palette, "secondary", 400),
    $indicator-color: color($dark-palette, "secondary", 400),
    $tab-ripple-color: color($dark-palette, "secondary", 400)
);

API References

• IgxIconComponent
• IgxNavbar구성 요소
• IgxTabs구성 요소
• IgxTabs구성 요소 스타일
• IgxTabItemComponent
• IgxTabHeader구성 요소
• IgxTabContentComponent

Theming Dependencies

• IgxIcon 테마
• IgxRipple 테마
• IgxButton 테마

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub