次の方法で共有

Breadcrumb コントロール

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

Note

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

Breadcrumb コントロール。

説明設定

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 をスイッチの値として参照して、各アイテムの特定のアクションを構成します。

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 プロパティにバインドされます。

制限

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

  • Last updated on