Angular Navbar 구성 요소 개요
Ignite UI for Angular IgxNavbarComponent
사용자에게 앱에서의 현재 위치를 알려주고 뒤로 이동하는 데 도움을 주는 애플리케이션 헤더 구성 요소입니다(브라우저의 "뒤로" 버튼과 유사). 탐색 표시줄은 또한 검색이나 즐겨찾기 등의 빠른 작업에 대한 링크를 제공하여 사용자가 잘못된 경로나 상태로 이동하지 않고도 애플리케이션을 원활하게 탐색할 수 있도록 돕습니다. 막대는 그것이 담긴 용기의 상단에 위치합니다.
Angular Navbar Example
Getting Started with Ignite UI for Angular Navbar
Ignite UI for Angular Navbar 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
첫 번째 단계는 IgxNavbarModule
우리 안에 app.module.ts 파일.
// app.module.ts
import { IgxNavbarModule } from 'igniteui-angular';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxNavbarModule],
...
})
export class AppModule {}
또는 16.0.0
부터 IgxNavbarComponent
독립 실행형 종속성으로 가져오거나 IGX_NAVBAR_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.
// home.component.ts
import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-navbar title="Ignite UI for Angular"></igx-navbar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_NAVBAR_DIRECTIVES]
/* or imports: [IgxNavbarComponent] */
})
export class HomeComponent {}
이제 Ignite UI for Angular 가져왔으므로 igx-navbar
구성 요소 사용을 시작할 수 있습니다.
Using the Angular Navbar
그런 다음 구성 요소의 템플릿에 다음 코드를 추가하여 제목이 있는 기본 탐색 모음을 표시할 수 있습니다.
<!--navbar.component.html-->
<igx-navbar title="Ignite UI for Angular">
</igx-navbar>
Add Menu Button
메뉴 버튼을 추가하기 위해 actionButtonIcon
속성을 사용하여 액션 버튼을 표시하고, 다음과 같이 메뉴 아이콘을 사용하도록 하겠습니다.
<!--navbar.component.html-->
<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true">
</igx-navbar>
Note
actionButtonIcon
은 설계상 Material 글꼴 세트를 사용합니다.
Add Icon Buttons
검색, 즐겨찾기 등을 위한 옵션을 추가하여 앱을 좀 더 기능적으로 만들 수 있습니다. 그렇게하려면 IgxIcon버튼 그리고 Igx아이콘 모듈을 만들고 app.module.ts (영문) 파일.
// app.module.ts
...
import {
IgxNavbarModule,
IgxIconButtonDirective,
IgxIconModule
} from 'igniteui-angular';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxIconButtonDirective, IgxIconModule],
})
export class AppModule {}
다음으로, 앱에서 제공할 각 옵션에 대한 아이콘 버튼으로 템플릿을 업데이트해야 합니다.
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.
Add Custom Action
탐색 모음의 가장 왼쪽 부분에서 앱 탐색을 위한 사용자 정의 템플릿을 사용하려면 어떻게 해야 합니까? 우리가 제공한 콘텐츠를 렌더링하는 igx-navbar-action
지시문을 사용하면 이를 쉽게 달성할 수 있습니다. Font Awesome 홈 아이콘이 있는 버튼을 사용하여 이를 수행하겠습니다.
/* navbar.component.css */
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
</igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
마지막으로, 사용자 정의 작업 버튼 아이콘이 포함된 탐색 표시줄의 모습은 다음과 같습니다.
Add Navigation Icon
뒤로 탐색하는 아이콘이 있는 탐색 표시줄을 생성하려면 몇 가지 단계를 따라야 합니다. 먼저, actionButtonIcon
속성을 사용하여 Material 글꼴 세트에서 적합한 아이콘을 선택할 수 있습니다. 그런 다음 이전에 방문한 페이지로 돌아가서 결과를 isActionButtonVisible
속성에 전달할 수 있는지 간단히 확인할 수 있습니다. 마지막 단계는 뒤로 탐색하기 위한 메서드를 만들고 이를 action
속성에 연결하는 것입니다.
<!--navbar.component.html-->
<igx-navbar title="Ignite UI for Angular"
actionButtonIcon="arrow_back"
[isActionButtonVisible]="canGoBack()"
(action)="navigateBack()">
</igx-navbar>
export class NavbarSample3Component {
constructor(private _location: Location) { }
public ngOnInit() { }
public navigateBack() {
this._location.back();
}
public canGoBack() {
return window.history.length > 0;
}
}
샘플이 올바르게 구성되면 브라우저에 다음이 표시됩니다.
Note
igx-navbar-action
또는 igxNavbarAction
이 제공되면 기본 actionButtonIcon
사용되지 않습니다.
Add Custom Title
navbar 제목에 대한 사용자 정의 콘텐츠를 제공하려면 igx-navbar-title
또는 igxNavbarTitle
지시어를 사용하여 이를 달성할 수 있습니다. title
입력 속성에서 제공하는 기본 탐색 표시줄의 제목을 대체합니다. 아래 샘플에는 이미지가 포함된 링크가 포함된 맞춤 제목이 있습니다.
<!--navbar.component.html-->
<div class="sample-column">
<igx-navbar>
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>menu</igx-icon>
</button>
</igx-navbar-action>
<div igxNavbarTitle>
<a href="https://ko.infragistics.com/products/ignite-ui-angular" target="_blank">
<img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
width="120px" height="50px" alt style="margin-top: 7px;">
</a>
</div>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
</div>
Note
igx-navbar-title
또는 igxNavbarTitle
이 제공되면 기본 title
사용되지 않습니다.
스타일링
탐색 모음 스타일을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 navbar-theme
확장하고 $text-color
, $background
, $idle-icon-color
및 $hover-icon-color
매개변수를 허용하는 새 테마를 만듭니다.
$custom-navbar-theme: navbar-theme(
$text-color: #151515,
$background: #dedede,
$idle-icon-color: #151515,
$hover-icon-color: #8c8c8c
);
Using CSS variables
마지막 단계는 새로 생성된 테마를 전달하는 것입니다.
@include css-vars($custom-navbar-theme);
Using mixins
Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.
구성 요소가 Emulated
ViewEncapsulation을 사용하는 경우::ng-deep
사용하여 이 캡슐화를 penetrate
해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep
앞에:host
선택기를 포함해야 합니다.
:host {
::ng-deep {
// Pass the custom navbar theme to the `igx-navbar` mixin
@include navbar($custom-navbar-theme);
}
}
Using color palettes
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette
및 igx-color
기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette
전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$white-color: #dedede;
$black-color: #151515;
$light-navbar-palette: palette($primary: $white-color, $secondary: $black-color);
그런 다음 igx-color
사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$custom-navbar-theme: navbar-theme(
$text-color: color($light-navbar-palette, "secondary", 400),
$background: color($light-navbar-palette, "primary", 400),
$idle-icon-color: color($light-navbar-palette, "secondary", 400),
$hover-icon-color: #8c8c8c
);
Note
igx-color
및 igx-palette
색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes
항목을 참조하세요.
Using schemas
스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성요소에 대해 제공되는 두 개의 사전 정의된 스키마(이 경우 light-navbar
스키마) 중 하나를 확장하십시오.
// Extending the navbar schema
$light-navbar-schema: extend($_light-navbar,
(
text-color: (
color: ("secondary", 400)
),
background: (
color: ("primary", 400)
),
idle-icon-color:(
color: ("secondary", 400)
),
$hover-icon-color: #8c8c8c
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light
또는 dark
)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
// Extending the global light-schema
$custom-light-schema: extend($light-schema,(
navbar: $light-navbar-schema
));
// Defining navbar with the global light schema
$cutom-navbar-theme: navbar-theme(
$palette: $light-navbar-palette,
$schema: $custom-light-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
API References
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어: