Shimmer 控制

用于显示加载体验的控件。

备注

GitHub 代码组件存储库中的完整文档和源代码。

Shimmer 控件。

说明

此代码组件提供了一个围绕绑定到按钮的 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 要呈现的 Shimmer 数量
RowWidth Shimmer 的宽度

Power Fx 公式示例:

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

样式属性

属性 说明
Theme 接受使用 Fluent UI 主题设计器 (windows.net) 生成的 JSON 字符串。 将此属性留空将使用 Power Apps 定义的默认主题。 有关如何配置的指导,请参阅主题化
AccessibilityLabel 屏幕阅读器 aria 标签

示例主题

主题 JSON 字符串将被传递给组件属性,varTheme 可用于设置其他标准组件的样式,如使用各个颜色的按钮。

有关在使用 Shimmer 时使用的调色板的更多信息,请参阅 IShimmerElement 文档的 IShimmerColors Interface 一节。

限制

此代码组件只能在画布应用和自定义页面中使用。