Angular Navbar 구성 요소 개요

The Ignite UI for Angular IgxNavbarComponent is an application header component that informs the user of their current position in an app, and helps them move back (much like the “back” button in a browser). The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. The bar sits at the top of the container it is placed in.

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에 대한 전체 소개는 시작 항목을 참조하십시오.

The first step is to import the IgxNavbarModule inside our app.module.ts file.

// app.module.ts

import { IgxNavbarModule } from 'igniteui-angular';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxNavbarModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxNavbarComponent as a standalone dependency, or use the IGX_NAVBAR_DIRECTIVES token to import the component and all of its supporting components and 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 {}

Now that you have the Ignite UI for Angular Navbar module or directives imported, you can start using the igx-navbar component.

Using the Angular Navbar

그런 다음 구성 요소의 템플릿에 다음 코드를 추가하여 제목이 있는 기본 탐색 모음을 표시할 수 있습니다.

<!--navbar.component.html-->

<igx-navbar title="Ignite UI for Angular"> </igx-navbar>

Add Menu Button

In order to add a menu button, we will show the action button using the actionButtonIcon property, and make it use a menu icon as follows:

<!--navbar.component.html-->

<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true"></igx-navbar>

Note

The actionButtonIcon uses the Material fontset by design.

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

What if we want to use a custom template for our app navigation on the left-most part of the navbar? We can easily achieve this by using the igx-navbar-action directive, which will render the content we have provided. We will do that by using a button with the Font Awesome home icon.

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

If we want to create a navbar with an icon navigating back, we should follow a couple of steps. First, we can use the actionButtonIcon property to choose a suitable icon from the Material fontset. Then, we can make a simple check if there are any previously visited pages to go back to, and pass the result to the isActionButtonVisible property. The last step is to create a method for navigating back and hook it to the action property.

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

If igx-navbar-action or igxNavbarAction is provided, the default actionButtonIcon will not be used.

Add Custom Title

If we want to provide a custom content for a navbar's title, we can achieve this by using igx-navbar-title or igxNavbarTitle directive. They will replace the default navbar's title provided by title input property. The sample below has a custom title containing a link with an image:

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

If igx-navbar-title or igxNavbarTitle is provided, the default title will not be used.

스타일링

Navbar Theme Property Map

기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

기본 속성	종속 속성	설명
$background	$text색	내비게이션 텍스트 색상
	$idle-아이콘-컬러	내비게이션 아이콘 색상
	$hover-아이콘-컬러	내비게이션 바 호버 아이콘 색상
	$border색 (인디고 변형에만 적용됨)	내비게이션 바 테두리 색상
$idle-아이콘-컬러	$hover-아이콘-컬러	내비게이션 바 호버 아이콘 색상

To get started with styling the navbar, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the navbar-theme and provide just the $background and $idle-icon-color parameters. The theme will automatically compute all of the necessary background and foreground colors for various interaction states. If need, you can also manually override specific properties for finer control over the appearance.

$custom-navbar-theme: navbar-theme(
  $background: #011627,
  $idle-icon-color: #ecaa53,
);

Note

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

The last step is to pass the newly created theme to the css-vars mixin:

@include css-vars($custom-navbar-theme);

Demo

Styling with Tailwind

내비게이션 바는 저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

The utility file includes both light and dark theme variants.

• Use light-* classes for the light theme.
• Use dark-* classes for the dark theme.
• Append the component name after the prefix, e.g., light-navbar, dark-navbar.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

전체 부동산 목록은 navbar-theme에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-navbar class="!light-navbar ![--background:#7B9E89] ![--text-color:#121E17]" title="Sample App">
  ...
</igx-navbar>

Note

The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

마지막에 내비게이션 바는 다음과 같이 보여야 합니다:

API References

• IgxNavbar구성 요소
• IgxNavbarAction 지시어
• IgxNavbarTitle 지시어
• IgxNavbar컴포넌트 스타일

사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

• IgxIconComponent
• IgxIconComponent 스타일

Theming Dependencies

• IgxIconComponent 테마
• IgxButtonComponent 테마

Additional Resources

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

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