Angular Navbar 구성 요소 개요

Ignite UI for AngularIgxNavbarComponent은 애플리케이션 헤더 컴포넌트로, 사용자가 앱 내에서 현재 위치를 알리고, 브라우저의 '뒤로' 버튼과 유사하게 뒤로 이동할 수 있도록 도와줍니다. 내비게이션 바는 검색이나 즐겨찾기 같은 빠른 동작 링크도 제공하여, 사용자가 잘못된 경로나 상태로 이동하지 않고 애플리케이션을 원활하게 탐색할 수 있도록 돕습니다. 바는 넣는 용기 상단에 위치합니다.

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/navbar';
// 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/navbar';
// 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 Navbar 모듈이나 지시를 가져왔으니 컴포넌트를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 } from 'igniteui-angular/navbar';
import { IgxIconButtonDirective } from 'igniteui-angular/directives';
import { IgxIconModule } from 'igniteui-angular/icon';
// 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

내비게이션 표시 제목에 맞춤 콘텐츠를 제공하고 싶다면, 또는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은 사용되지 않습니다.

스타일링

Navbar Theme Property Map

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

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

내비게이션 바 스타일링을 시작하려면, 모든 테마 기능과 컴포넌트 믹스인이 있는 파일을 가져와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를 만들어 확장하고 매개변수$background만$idle-icon-color 제공합니다. 테마는 다양한 상호작용 상태에 필요한 배경 및 전경 색상을 자동으로 계산합니다. 필요하다면 특정 속성을 수동으로 오버라이드하여 외관을 더 세밀하게 제어할 수도 있습니다.

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

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

마지막 단계는 새로 만든 테마를 믹싱에css-vars 전달하는 것입니다:

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

Demo

Styling with Tailwind

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

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

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

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-navbar​dark-navbar 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

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

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

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

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

API References

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

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

• IgxIconComponent
• IgxIconComponent 스타일

Theming Dependencies

• IgxIconComponent 테마
• IgxButtonComponent 테마

Additional Resources

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

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