Поделиться через

Shimmer контроль

  • Статья

Элемент управления, используемый для отображения процесса загрузки.

Заметка

Полная документация и исходный код находятся в разделе Репозиторий компонентов кода на GitHub.

Элемент управления Shimmer.

Description

Этот компонент кода обеспечивает оболочку вокруг элемента управления Fluent UI Shimmer, привязанную к кнопке, для использования в приложениях на основе холста и на пользовательских страницах.

Ключевые свойства

Свойство Description
Items Элементы действия для визуализации
Rows Элементы действия для визуализации
SpacebetweenShimmer Пробел между каждым элементом Shimmer в случае нескольких строк.

Свойства элементов

Каждая запись в приведенной ниже таблице может иметь следующие значения.

Свойство Description
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)

Каждая запись в приведенной ниже таблице может иметь следующие значения.

Свойство Description
RowKey Обязательное. Ключ, который используется для указания конкретного элемента управления Shimmer и при добавлении вложенных элементов. Клавиши должны быть уникальными.
RowOrder Порядок, в котором Shimmer должен отображаться
RowCount Количество элементов Shimmer для отрисовки
RowWidth Ширина элемента управления Shimmer

Пример формулы Power Fx:

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

Свойства стиля

Свойство Description
Theme Принимает строку JSON, сгенерированную с помощью Конструктора тем Fluent UI (windows.net). Если оставить это поле пустым, будет использоваться тема по умолчанию, определенная Power Apps. Сведения о порядке настройки см. в разделе темы.
AccessibilityLabel Подпись Aria для программы чтения с экрана

Пример темы

Строка Theme JSON передается свойству компонента, в то время как varTheme может использоваться для стилизации других стандартных компонентов, таких как кнопки, с использованием отдельных цветов.

Для получения дополнительной информации о цветовой палитре, которая будет использоваться при работе с Shimmer, см. раздел IShimmerColors Interface документации по IShimmerElement.

Ограничения

Этот компонент кода можно использовать только в приложениях на основе холста и настраиваемых страницах.