Angular 하단 탐색 구성요소 개요
Ignite UI for Angular 하면 사용자가 단일 보기에 표시되는 여러 콘텐츠 패널 사이를 탐색할 수 있습니다. 패널 탐색은 애플리케이션 하단에 있는 탭 버튼을 사용하여 수행됩니다.
Note
igx-tab-bar 선택기는 더 이상 사용되지 않습니다. 대신 igx-bottom-nav 사용할 수 있습니다. IgxTabBarComponent 클래스의 이름이 IgxBottomNavComponent로 변경되었습니다. IgxTabBarModule의 이름이 IgxBottomNavModule로 변경되었습니다.
Angular Bottom Navigation Example
Getting Started with Ignite UI for Angular Bottom Navigation
Ignite UI for Angular Bottom Navigation 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
다음 단계는 IgxBottomNavModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxBottomNavModule } from 'igniteui-angular';
// import { IgxBottomNavModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxBottomNavModule],
...
})
export class AppModule {}
또는 16.0.0부터 IgxBottomNavComponent 독립 실행형 종속성으로 가져오거나 IGX_BOTTOM_NAV_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.
// home.component.ts
import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent]
/* or imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxIconComponent] */
})
export class HomeComponent {}
이제 Ignite UI for Angular 가져왔으므로 igx-bottom-nav 구성 요소 사용을 시작할 수 있습니다.
Using the Angular Bottom Navigation
구성 요소의 템플릿에는 하단 탐색과 세 가지 항목이 포함되어 있습니다. 각 항목은 데이터의 헤더와 컨테이너를 각각 나타내는 igx-bottom-nav-header 및 igx-bottom-nav-content 구성 요소를 래핑합니다. 헤더는 일반적으로 아이콘과 선택적 텍스트 레이블로 구성됩니다. 하단 탐색 컨트롤은 머티리얼 디자인 아이콘과 호환되므로 애플리케이션에 적용하려면 기본 애플리케이션 폴더의 'styles.css' 파일에 Material+Icons 가져오기를 추가하기만 하면 됩니다.
Note
아직 사용하지 않으셨다면 igx-icon 지금까지의 애플리케이션에서 IgxIconModule에서 app.module.ts 계속하기 전에.
// styles.css
...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
모든 과정이 순조롭게 진행되면 브라우저에 데모 샘플이 표시됩니다.
Customizing Bottom Navigation
아이콘 옆에 레이블을 추가하여 탭을 수정하고 헤더 스타일이 올바른지 확인하겠습니다.
먼저 구성 요소 TypeScript 파일에서 데이터 소스에 대한 일부 개체 배열을 정의합니다.
public songsList: object[] = [
{ title: 'Havana', artist: 'Camila Cabello' },
{ title: 'Meant To Be', artist: 'Bebe Rexha & Florida Georgia Line' },
{ title: 'New Rules', artist: 'Dua Lipa' },
{ title: 'Wolves', artist: 'Selena Gomez & Marshmello' }
];
public moviesList: object[] = [
{ title: 'Logan', genre: 'Action, Drama, Sci-Fi' },
{ title: 'Wonder Woman', genre: 'Action, Adventure, Fantasy' },
{ title: 'Guardians of the Galaxy Vol. 2', genre: 'Action, Adventure, Sci-Fi' },
{ title: 'Star Wars: The Last Jedi', genre: 'Action, Adventure, Fantasy' }
];
public booksList: object[] = [
{ title: 'Wonder', author: 'R. J. Palacio' },
{ title: 'Milk and Honey', author: 'Rupi Kaur' },
{ title: 'Giraffes Can\'t Dance', author: 'Jeff Kinne' },
{ title: 'The Getaway', author: 'Selena Gomez & Marshmello' }
];
다음으로 구성요소의 템플릿 마크업을 다음과 같이 업데이트합니다.
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
<span igxBottomNavHeaderLabel>Songs</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let song of songsList">
<span class="item-line1">{{song.title}}</span><br/>
<span class="item-line2">{{song.artist}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let movie of moviesList">
<span class="item-line1">{{movie.title}}</span><br/>
<span class="item-line2">{{movie.genre}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
<span igxBottomNavHeaderLabel>Books</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let book of booksList">
<span class="item-line1">{{book.title}}</span><br/>
<span class="item-line2">{{book.author}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
항목의 헤더 태그 사이에 아이콘과 레이블이 있는 범위를 배치하는 것 외에도 igxBottomNavHeaderIcon 및 igxBottomNavHeaderLabel 지시문도 연결한다는 점을 눈치챘을 것입니다. 이러한 지시어는 각 요소를 나타내며 적절한 스타일을 적용합니다.
마지막으로 콘텐츠 템플릿의 DIV 및 SPAN 요소에서 사용하는 CSS 클래스를 구성 요소의 CSS 파일에 추가합니다.
.item {
margin-bottom: 5px;
}
.item-line1 {
font-size: 14px;
color: gray;
}
.item-line2 {
font-size: 12px;
color: darkgray;
}
igx-bottom-nav-content {
padding: 10px;
}
이러한 수정 후에는 하단 탐색이 다음과 유사해 보일 것입니다.
헤더에 라벨과 아이콘이 있는 것만으로는 충분하지 않은 경우 헤더 태그 사이에 사용자 정의 콘텐츠를 추가하면 됩니다. 예는 다음과 같습니다.
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
<div>
<!-- your custom tab header content goes here -->
</div>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<h1>Tab content</h1>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Integration With Router Outlet Container
하단 탐색 구성 요소의 주요 용도는 콘텐츠가 포함된 탭 항목을 정의하는 것이지만 헤더만 포함하여 탭 항목을 정의해야 하는 경우가 있을 수 있습니다. 아마도 이러한 사용의 주요 시나리오는 Angular Router를 사용하여 뷰 간 탐색일 것입니다. 다음 예에서는 단일 라우터 출력의 세 구성 요소 간에 전환하도록 하단 탐색 구성 요소를 구성하는 방법을 보여줍니다.
시작하려면 하단 탐색 구성 요소를 호스팅하는 기본 구성 요소와 데모용 일부 콘텐츠가 포함된 세 개의 보기 구성 요소가 필요합니다. 코드 조각의 단순성을 위해 보기 구성 요소는 매우 짧은 템플릿을 사용하지만 필요한 경우 더 쉽게 구분할 수 있도록 자유롭게 만들 수 있습니다. 또한 app.module.ts 파일에서 이러한 보기 구성 요소를 가져옵니다.
// bottomnav-routing.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-bottomnav-routing',
styleUrls: ['bottomnav-routing.component.scss'],
templateUrl: 'bottomnav-routing.component.html'
})
export class BottomNavRoutingComponent { }
@Component({
template: '<p>Item 1 Content</p>'
})
export class BottomNavRoutingView1Component { }
@Component({
template: '<p>Item 2 Content</p>'
})
export class BottomNavRoutingView2Component { }
@Component({
template: '<p>Item 3 Content</p>'
})
export class BottomNavRoutingView3Component { }
다음 단계는 app-routing.module.ts 파일에 적절한 탐색 매핑을 만드는 것입니다.
import { RouterModule, Routes } from '@angular/router';
import {
TabbarRoutingComponent,
TabbarRoutingView1Component,
TabbarRoutingView2Component,
TabbarRoutingView3Component,
} from './tabbar-routing.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/tabbar-routing'
},
{
path: 'tabbar-routing',
component: TabbarRoutingComponent,
children: [
{ path: 'tabbar-view1', component: TabbarView1Component },
{ path: 'tabbar-view2', component: TabbarView2Component },
{ path: 'tabbar-view3', component: TabbarView3Component }
]
}
];
@NgModule({
exports: [ RouterModule ],
imports: [ RouterModule.forChild(routes) ]
})
export class TabbarRoutingModule { }
이제 모든 탐색 경로가 설정되었으므로 BottomNavigation 구성 요소를 선언하고 라우팅을 위해 구성해야 합니다. 또한 뷰 구성 요소의 출력을 렌더링하기 위한 라우터 출력을 추가해야 합니다.
<!-- bottomnav-routing.component.html -->
<router-outlet></router-outlet>
<igx-bottom-nav #tabs1>
<igx-bottom-nav-item
routerLinkActive
#rla1="routerLinkActive"
[selected]="rla1.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view1">
<igx-icon igxBottomNavHeaderIcon>phone</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla2="routerLinkActive"
[selected]="rla2.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view2">
<igx-icon igxBottomNavHeaderIcon>supervisor_account</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla3="routerLinkActive"
[selected]="rla3.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view3">
<igx-icon igxBottomNavHeaderIcon>format_list_bulleted</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
</igx-bottom-nav>
위 코드는 세 개의 탭 항목이 있는 BottomNavigation 구성 요소를 만듭니다. 모든 탭 항목에는 연결된 경로가 현재 활성화되어 있는지 추적하는 RouterLinkActive 지시어가 적용되어 있습니다. RouterLink 지시문은 탭 항목이 아닌 헤더 요소 자체에 적용됩니다. 이러한 링크 중 하나라도 활성화되면 RouterLinkActive 지시문의 isActive 속성에 대한 바인딩으로 인해 해당 탭 항목에 selected 속성이 설정됩니다. 이렇게 하면 선택한 탭 항목이 항상 현재 브라우저의 주소와 동기화된 상태로 유지됩니다.
위에 설명된 접근 방식은 BottomNavigation 구성 요소를 사용한 라우팅을 보여주기 위해 다음 샘플에서 사용됩니다.
Styles
탭 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 bottom-nav-theme 확장하고 탭 그룹의 스타일을 지정할 수 있는 다양한 매개변수를 허용하는 새로운 테마를 만듭니다.
$dark-bottom-nav: bottom-nav-theme(
$background: #292826,
$active-item-color: #F4D45C
);
bottom-nav-theme 살펴보면 하단 탐색 구성 요소의 스타일을 지정하기 위해 사용할 수 있는 매개변수가 훨씬 더 많다는 것을 알 수 있습니다!
Note
항목 콘텐츠의 일부로 사용되는 추가 구성 요소의 스타일을 지정하려면 해당 구성 요소에 특정한 추가 테마를 만들어야 합니다.
Including themes
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
$legacy-support true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.
@include bottom-nav($dark-bottom-nav);
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.
:host {
::ng-deep {
@include bottom-nav($dark-bottom-nav);
}
}
$legacy-support false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.
@include css-vars($dark-bottom-nav);
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.
:host {
@include css-vars($dark-bottom-nav);
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$yellow-color: #F4D45C;
$black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$dark-bottom-nav: bottom-nav-theme(
$background: color($dark-palette, "primary", 400),
$active-item-color: color($dark-palette, "secondary", 400)
);
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소에 대해 제공되는 사전 정의된 두 스키마 중 하나(이 경우 dark-bottom-nav 스키마)를 확장합니다.
// Extending the dark bottom nav schema
$dark-bottom-nav-schema: extend($_dark-bottom-nav,
(
background: (
color: ("primary", 400)
),
active-item-color: (
color: ("secondary", 400)
)
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-bottom-nav: $dark-bottom-nav-schema
));
// Defining bottom-nav-theme with the global dark schema
$dark-bottom-nav: bottom-nav-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
API References
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub