NavBar (ナビバー)

Navbar コンポーネントは、アプリケーションでユーザーの現在の位置を明確にし、アプリケーション レベルのナビゲーションを向上します。常に画面の上に配置されます。Navbar は、Ignite UI for Angular Navbar コンポーネントと視覚的に同じものです。

タイプ

Navbar は、3 つのレイアウト構成があり、アイコン アクションとタイトル、テキスト アクションとタイトル、タイトルで定義されます。

アクション アイコン

各 Navbar は、画面右端から左へ、描画されるシンプルなイベントをトリガーする操作アイコンを 4 アイコンまでサポートします。

スタイル設定

Navbar には、タイトル、アイコ、ン、背景色を変更する基本的なスタイル設定機能があります。

使用方法

Navbar 操作は、タイトルと重ならないように使用してください。シングル メニューの表示をトリガーするアイコンを使用して回避できます。操作で他のアイコンを指定した場合、Navbar に通常配置するすべての操作をその下に統合し、 Navbar にスタンドアロンの操作を配置しないようにします。

良い例 悪い例

コードの生成

このセクションは、オーバーライドとコード生成にどのような影響があるかについて説明します。

Warning

デザインの Navbar のインスタンスで Detach from Symbol をトリガーすると、ほとんどの場合で Navbar のためのコード生成機能が失われます。

イベント

Action Button で提供される Event プロパティはコンポーネント TypeScript のメソッドを作成するために使用し、HTML に onTabItemSelected シグネチャを追加します。Event プロパティはコンポーネント TypeScript のメソッドを作成するために使用し、HTML に onClick シグネチャを追加します。波括弧構文 ({onEventName}) を使用してイベントを指定する必要があります。

タイプ

このプロパティは表示する NavBar のタイプを決定します。None に設定した場合、コントロールは描画されません。

Action Button のアイコン

NavBar コントロールの左側にある Action Button に使用するアイコンを決定します。Icon のために選択された色は、このコントロールのすべての Icons に使用する色を決定します。

タイトル

NavBar のタイトル領域内に表示されます。Title プロパティには、テキスト、テキストのバインディング、またはその両方を含むことができます。例:

  • 設定
  • {settingsLabel}
  • 重要な {labelText}

アクション アイコン

アイコンは NavBar の右側に 4 つまで表示されます。

その他のリソース

関連トピック:

コミュニティに参加して新しいアイデアをご提案ください。