次の方法で共有

Nav コントロール

  • [アーティクル]

ナビゲーションを提供するために使用されるコントロール。

Note

説明書の全文とソース コードは、GitHub コード コンポーネント リポジトリ を参照してください。

Nav コントロール。

説明設定

ナビゲーション ウィンドウ (Nav) は、アプリまたはサイトの主な領域へのリンクを提供します。

Nav コード コンポーネントは、Fluent UI Nav メニュー コンポーネントをキャンバス アプリとカスタム ページ内から使用できるようにします。

Note

コンポーネントのソース コードと詳細については、GitHub コード コンポーネント リポジトリを参照してください。

プロパティ​​

重要なプロパティ

Property 説明設定
Selected key 選択するキー。 これは、ユーザーがコントロールを操作したときに OnChange イベントで更新されます。
Items 必須。 表示するデータ ソース項目のテーブル。
Fields 必須。 データ セットから含まれるフィールド。

Items プロパティ

各項目は、次のスキーマを使用して、コンポーネント内のデータを視覚化します。

件名 説明設定
ItemDisplayName コマンド/タブ/メニュー項目の表示名
ItemKey 選択されている項目を示すため、およびサブ項目を追加するときに使用するキー。 キーは一意である必要があります。
ItemEnabled オプションが無効になっている場合は、false に設定します
ItemVisible オプションが表示されない場合は、false に設定します
ItemIconName 使用する Fluent UI アイコン (Fluent UI アイコンを参照)
ItemIconColor アイコンをレンダリングする色 (たとえば、名前付き、RGB、または 16 進数値)
ItemIconOnly テキスト ラベルを表示しない - アイコンのみ
ItemParentKey オプションを別のオプションの子アイテムとしてレンダリングする
ItemExpanded グループを折りたたみまたは展開したままにする場合は、それぞれ false または true に設定します。

例:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

スタイル プロパティ

Property 説明設定
Theme Fluent UI テーマ デザイナー (windows.net) を使用して生成された JSON 文字列を受け入れます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 構成方法に関するガイドラインは、テーマ を参照してください。
AccessibilityLabel スクリーン リーダーの aria-label
CollapseByDefault Nav のすべてのグループを折りたたみまたは展開したままにする場合は、それぞれ True または False (On または OFF) に設定します。 個々のアイテム レベルの展開プロパティが尊重されます。

イベントのプロパティ

Property 説明設定
InputEvent コントロールに送信するイベント。 例: SetFocus。 以下を参照してください。

Behavior

SetFocus を InputEvent としてサポートします。

"選択時" の動作を構成する

コンポーネントの OnSelect プロパティの Switch() 式を使用し、コントロールの選択された ItemKey をスイッチの値として参照して、各アイテムの特定のアクションを構成します。

false の値を Power Fx 言語の適切な式に置き換えます。

  Switch( Self.Selected.ItemKey,

    /* Action for ItemKey 1 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", false,

    /* Default action */
        false
  )

コントロールにフォーカスを設定する

新しいダイアログが表示され、デフォルトのフォーカスがコントロールにある場合、明示的なフォーカスの設定が必要になります。

入力イベントを呼び出すには、Input Eventプロパティにバインドされたコンテキスト変数を、SetFocus で始まり、その後にランダムな要素が続く文字列に設定して、アプリが変更として検出できるようにします。

E.g.

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

そして、コンテキスト変数 ctxResizableTextareaEvent は、プロパティ Input Event のプロパティにバインドされます。

制限

このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。