Angular Navbar 구성 요소 개요

    Ignite UI for Angular IgxNavbarComponent 앱에서 현재 위치를 사용자에게 알리고 뒤로 이동하는 데 도움이 되는 애플리케이션 헤더 구성 요소입니다(브라우저의 "뒤로" 버튼과 매우 유사). 탐색 모음은 검색이나 즐겨찾기와 같은 빠른 작업에 대한 링크도 제공하여 사용자가 잘못된 경로나 상태로 이동하려고 하지 않고도 애플리케이션을 원활하게 탐색할 수 있도록 도와줍니다. 탐색 모음은 배치된 컨테이너의 맨 위에 있습니다.

    Angular Navbar 예제

    EXAMPLE
    TS
    HTML

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular Navbar 시작하기

    Ignite UI for Angular Navbar 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular
    cmd

    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 {}
    typescript

    또는 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 {}
    typescript

    이제 Ignite UI for Angular 가져왔으므로 igx-navbar 구성 요소를 사용할 수 있습니다.

    Angular Navbar 사용

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

    <!--navbar.component.html-->
    
    <igx-navbar title="Ignite UI for Angular"> </igx-navbar>
    html

    메뉴 버튼 추가

    메뉴 버튼을 추가하기 위해 actionButtonIcon 속성을 사용하여 액션 버튼을 표시하고, 다음과 같이 메뉴 아이콘을 사용하도록 하겠습니다.

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

    actionButtonIcon은 설계상 Material 글꼴 세트를 사용합니다.

    아이콘 버튼 추가

    검색, 즐겨찾기 등을 위한 옵션을 추가하여 앱을 좀 더 기능적으로 만들 수 있습니다. 그렇게하려면 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 {}
    typescript

    다음으로, 앱에서 제공할 각 옵션에 대한 아이콘 버튼으로 템플릿을 업데이트해야 합니다.

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

    모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

    EXAMPLE
    TS
    HTML

    사용자 정의 작업 추가

    탐색 모음의 가장 왼쪽 부분에서 앱 탐색을 위한 사용자 정의 템플릿을 사용하려면 어떻게 해야 합니까? 우리가 제공한 콘텐츠를 렌더링하는 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");
    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>
    html

    마지막으로, 사용자 정의 작업 버튼 아이콘이 포함된 탐색 표시줄의 모습은 다음과 같습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    탐색 아이콘 추가

    뒤로 탐색하는 아이콘이 있는 탐색 표시줄을 생성하려면 몇 가지 단계를 따라야 합니다. 먼저, actionButtonIcon 속성을 사용하여 Material 글꼴 세트에서 적합한 아이콘을 선택할 수 있습니다. 그런 다음 이전에 방문한 페이지로 돌아가서 결과를 isActionButtonVisible 속성에 전달할 수 있는지 간단히 확인할 수 있습니다. 마지막 단계는 뒤로 탐색하기 위한 메서드를 만들고 이를 action 속성에 연결하는 것입니다.

    <!--navbar.component.html-->
    
    <igx-navbar
      title="Ignite UI for Angular"
      actionButtonIcon="arrow_back"
      [isActionButtonVisible]="canGoBack()"
      (action)="navigateBack()"
    >
    </igx-navbar>
    html
    export class NavbarSample3Component {
      constructor(private _location: Location) {}
    
      public ngOnInit() {}
    
      public navigateBack() {
        this._location.back();
      }
    
      public canGoBack() {
        return window.history.length > 0;
      }
    }
    typescript

    샘플이 올바르게 구성되면 브라우저에 다음이 표시됩니다.

    EXAMPLE
    TS
    HTML

    igx-navbar-action 또는 igxNavbarAction이 제공되면 기본 actionButtonIcon 사용되지 않습니다.

    맞춤 제목 추가

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

    igx-navbar-title 또는 igxNavbarTitle이 제공되면 기본 title 사용되지 않습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    스타일링

    탐색 모음 스타일을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

    가장 간단한 접근 방식에 따라 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,
    );
    scss

    우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

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

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

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    App Builder | CTA 배너

    API 참조

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

    테마 종속성

    추가 리소스

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