Shimmer コントロール

読み込みエクスペリエンスを表示するために使用されるコントロール。

Note

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

説明設定

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

重要なプロパティ

Property	説明設定
Items	レンダリングするアクション項目
Rows	レンダリングするアクション項目
SpacebetweenShimmer	複数の列がある場合は、各 Shimmer 間のスペースまたはギャップ。

項目のプロパティ

以下のテーブルの各レコードには、次の値を含めることができます。

Property	説明設定
ItemKey	必須。 特定の ShimmerElement を表すために使用するキー。 キーは一意である必要があります。
ItemType	必須。 3 つの Shimmer 要素 (円、ギャップ、線) の一覧からの Shimmer 要素タイプ。
ItemRowKey	必須。 RowKey を表し、関係を確立するために使用するキー。
ItemHeight	ShimmerElement の高さ
ItemWidth	ShimmerElement の幅
ItemVerticalAlign	要素の配置方法を指定します。 たとえば、"上"、"中央"、"下"。

Power Fx 式の例。

Table({ItemKey:"1",ItemWidth:"3.8",ItemHeight:60,ItemRowKey:"1",ItemType:"circle"},{ItemKey:"2",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"3",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"4",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"5",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"6",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"7",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"8",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"9",ItemWidth:"3.8",ItemHeight:40,ItemRowKey:"1",ItemType:"line"},{ItemKey:"10",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"11",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"12",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"13",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"14",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"15",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"16",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"})

行 (rows_Items) プロパティ値

以下のテーブルの各レコードには、次の値を含めることができます。

Property	説明設定
RowKey	必須。 指定された Shimmer を示すため、およびサブ項目を追加するときに使用するキー。 キーは一意である必要があります。
RowOrder	Shimmer がレンダリングする順序
RowCount	レンダリングする Shimmer の数
RowWidth	Shimmer の幅

Power Fx 式の例。

Table(
    {
        RowKey: "1",
        RowOrder:1,
        RowCount:5,
        RowWidth: 100
    }
)

スタイル プロパティ

Property	説明設定
Theme	Fluent UI テーマ デザイナー (windows.net) を使用して生成された JSON 文字列を受け入れます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 構成方法に関するガイドラインは、テーマ を参照してください。
AccessibilityLabel	スクリーン リーダーの aria-label

テーマの例

テーマ JSON 文字列はコンポーネント プロパティに渡されますが、varTheme は、個々の色を使用して、ボタンなどの他の標準コンポーネントのスタイルを設定するために使用できます。

Shimmer での作業中に使用されるカラー パレットの詳細については、IShimmerElement の説明書の IShimmerColors Interface セクションを参照してください。

制限

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