NavBar (ナビバー)
Navbar コンポーネントは、アプリケーションでユーザーの現在の位置を明確にし、アプリケーション レベルのナビゲーションを向上します。常に画面の上に配置されます。Navbar は、Ignite UI for Angular Navbar コンポーネントと視覚的に同じものです。
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 つまで表示されます。
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。