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/bottom-nav';
// 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 } from 'igniteui-angular/bottom-nav';
import { IgxIconComponent } from 'igniteui-angular/icon';
// 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 Bottom Navigation 모듈이나 지침이 가져왔으니, 컴포넌트igx-bottom-nav 사용을 시작할 수 있습니다.
Using the Angular Bottom Navigation
우리 컴포넌트 템플릿에는 Bottom Navigation과 세 가지 항목이 포함되어 있습니다. 각 항목은 헤더와 컨테이너를 각각 나타내는 컴포넌트를 랩합니다igx-bottom-nav-headerigx-bottom-nav-content. 헤더는 보통 아이콘과 선택적 텍스트 라벨로 구성됩니다. 하단 내비게이션 컨트롤은 Material Design 아이콘과 호환되므로, 애플리케이션에 채택하려면 메인 애플리케이션 폴더의 '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를 사용하여 뷰 간 탐색일 것입니다. 다음 예제는 단일 라우터 아웃렛에서 세 개의 구성 요소 간에 전환하도록 하단 탐색 구성 요소를 구성하는 방법을 보여줍니다.
우선, Bottom Navigation 컴포넌트를 호스팅하는 메인 컴포넌트와 시연용 일부 콘텐츠가 포함된 세 개의 뷰 컴포넌트가 필요합니다. 코드 스니펫의 단순성을 위해 뷰 컴포넌트는 매우 짧은 템플릿을 가질 수 있지만, 필요하다면 구분하기 쉽게 만들 수 있습니다. 또한 이 뷰 컴포넌트들을 파일 내에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 해 주세요. 이 링크들 중 하나라도 활성화되면, 해당 탭 항목selected은 지시적RouterLinkActive 속성에isActive 묶여 속성이 설정됩니다. 이렇게 하면 선택한 탭 항목이 항상 현재 브라우저 주소와 동기화됩니다.
위에 설명된 접근 방식은 BottomNavigation 구성 요소를 사용한 라우팅을 보여주기 위해 다음 샘플에서 사용됩니다.
Styles
Bottom Nav Theme Property Map
기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
| $background | $label색 | 유휴 상태에서 사용하는 라벨 색상. |
| $label색 | $icon색 | 유휴 상태에서 사용하는 아이콘 색상입니다. |
| $label-장애-색상 | 라벨의 비활성화 색상. | |
| $icon색 | $label색 | 유휴 상태에서 사용하는 라벨 색상. |
| $label-장애-색상 | $icon-장애-색상 | 아이콘의 비활성화 색상. |
| $icon-장애-색상 | $label-장애-색상 | 라벨의 비활성화 색상. |
| $label-선택-컬러 | $icon-선택-컬러 | 선택한 주에서 사용된 아이콘 색상. |
| $icon-선택-컬러 | $label-선택-컬러 | 선택한 주에서 사용되는 라벨 색상. |
탭 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹스인이 있는 파일을 가져와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,
$icon-selected-color: #f4d45c
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
만약 우리가bottom-nav-theme 살펴보면, 하단 내비게이션 구성 요소를 스타일링하기 위해 사용할 수 있는 매개변수가 더 많다는 것을 알 수 있습니다!
Note
항목 콘텐츠의 일부로 사용되는 추가 구성 요소의 스타일을 지정하려면 해당 구성 요소에 특정한 추가 테마를 만들어야 합니다.
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
@include css-vars($dark-bottom-nav);
Demo
Styling with Tailwind
하단 내비게이션은 저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
글로벌 스타일시트에서 Tailwind 가져오기와 함께, 원하는 테마 유틸리티를 다음과 같이 적용할 수 있습니다:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요,
light-bottom-navdark-bottom-nav예: .
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
전체 부동산 목록은 IgxBottomNav 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:
<igx-bottom-nav
class="!light-bottom-nav
![--background:#011627]
![--icon-selected-color:#FF8040]
![--label-selected-color:#FF8040]">
...
</igx-bottom-nav>
Note
느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.
마지막에 네비게이션이 이렇게 보여야 합니다:
API References
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub