Breadcrumb コントロール

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

Note

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

説明設定

Breadcrumb コントロールは、アプリまたはサイトのナビゲーションの支援として使用する必要があります。 これらは、階層における現在のページの場所を示し、ユーザーが階層の残りの部分との関係でどこに位置するかを理解するのに役立ちます。 Breadcrumb により、階層の上位レベルにワンクリックでアクセスすることもできます。

このコード コンポーネントは、キャンバス アプリおよびカスタム ページで使用するために、Fluent UI Breadcrumb コントロールのラッパーを提供します。

プロパティ​​

重要なプロパティ

Property	説明設定
SelectedKey	これは、選択されたキーを示します。 これは、ユーザーがコントロールを操作したときに OnChange イベントで更新されます。
Items	レンダリングするアクション項目

Items のプロパティ

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

件名	説明設定
ItemDisplayName	パンくず項目の表示名
ItemKey	選択されている項目を示すため、およびサブ項目を追加するときに使用するキー。 キーは一意である必要があります。
ItemClickable	特定のパンくず項目がクリックできない場合は、false に設定します。

Power Fx 式の例。

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

スタイル プロパティ

件名	説明設定
Theme	Fluent UI テーマ デザイナー (windows.net) を使用して生成された JSON 文字列を受け入れます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 構成方法に関するガイドラインは、テーマ を参照してください。
AccessibilityLabel	スクリーン リーダーの aria-label
MaxDisplayedItems	併合する前に表示するパンくずの最大数。 zeroの場合、すべてのパンくずがレンダリングされます。
OverflowIndex	オーバーフローした項目が折りたたまれるインデックス (オプション)。 既定ではゼロに設定されています。

イベントのプロパティ

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

Behavior

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

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

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

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

このコントロールはナビゲーションに使用されるため、論理アクションは、(理想的には、関連データがロードされた関連する画面に) Navigate 関数を使用します。

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", false,
  
    /* Default action */
        false
  )

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

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

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

Power Fx 式の例。

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

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

制限

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