クラス IgxNavbarComponent

Ignite UI for Angular Navbar - ヘルプ

Ignite UI Navbar は、ハンバーガー メニュー、ナビゲーション状態、「戻る」ボタンなどを含むアプリケーション ヘッダーを提供するために使用されます。 アイコンとして表示されるその他のアクションもサポートします。 例:

<igx-navbar title="Sample App" actionButtonIcon="menu">
  <igx-icon name="search"></igx-icon>
  <igx-icon name="favorite"></igx-icon>
  <igx-icon name="more_vert"></igx-icon>
</igx-navbar>

階層

  • IgxNavbarComponent

プロパティ

actionButtonIcon

actionButtonIcon: string

IgxNavbarComponent のアイコンを設定する @Input プロパティ。

<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar>

id

id: string = `igx-navbar-${NEXT_ID++}`

id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。

<igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu">

onAction

onAction: EventEmitter<IgxNavbarComponent> = new EventEmitter<IgxNavbarComponent>()

アクションが実行されたときに発生するイベント。IgxNavbar コンポーネントへの参照を引数として提供します。

public actionExc(event){
    alert("Action Execute!");
}
 //..
<igx-navbar (onAction)="actionExc($event)" title="Sample App" actionButtonIcon="menu">

title

title: string

IgxNavbarComponent のタイトルを設定する @Input プロパティ。

<igx-navbar title="Sample App" actionButtonIcon="menu">

titleId

titleId: string = `igx-navbar-${IgxNavbarComponent.NEXT_ID++}`

IgxNavbarComponent の titleId を設定する @Input プロパティ。設定されていない場合、自動的に生成されます。

<igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu">

アクセサー

isActionButtonVisible

  • get isActionButtonVisible(): boolean
  • set isActionButtonVisible(value: boolean): void
  • IgxNavbarComponent のアクション ボタンが表示されるかどうか (true/false) を返します。

     @ViewChild("MyChild")
    public navBar: IgxNavbarComponent;
    ngAfterViewInit(){
        let actionButtonVisibile = this.navBar.isActionButtonVisible;
    }

    返却 boolean

  • IgxNavbarComponent のアクション ボタンが表示されるかどうかを設定します。

    <igx-navbar [title]="currentView" [isActionButtonVisible]="'false'"></igx-navbar>

    パラメーター

    • value: boolean

    返却 void