Shimmer 控制

用來顯示下載體驗的控制項。

Note

完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。

描述

此程式碼元件為繫結至按鈕的 Fluent UI Shimmer 控制項提供了一個包裝函式，以便在畫布和畫布和自訂頁面中使用。

索引鍵屬性

屬性	名描述
Items	要呈現的動作項目
Rows	要呈現的動作項目
SpacebetweenShimmer	如果有多個資料列，每個 Shimmer 之間的空間或間隙。

項目屬性

下表所包含的每個記錄可以有下列值。

屬性	描述
ItemKey	必要。 用來指示特定 ShimmerElement 的索引鍵。 索引鍵必須是唯一的。
ItemType	必要。 從三個 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) 屬性值

下表所包含的每個記錄可以有下列值。

屬性	描述
RowKey	必要。 用於指示特定 Shimmer 及新增子項目時的索引鍵。 索引鍵必須是唯一的。
RowOrder	Shimmer 應呈現的順序
RowCount	要呈現的 Shimmers 數目
RowWidth	Shimmer 的寬度

範例 Power Fx 公式：

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

樣式屬性

屬性	描述
Theme	接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南，請參閱佈景主題。
AccessibilityLabel	螢幕助讀程式 aria-label

範例主題

Theme JSON 字串會傳遞至元件屬性，而 varTheme 可用來建立其他標準元件的樣式，例如使用單獨色彩的按鈕。

有關在使用 Shimmer 時使用的調色盤詳細資訊，請參閱 IShimmerElement 文件的 IShimmerColors Interface 一節。

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。