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

Shimmer контроль

  • Стаття

Елемент керування, що використовується для відображення процесу завантаження.

Нотатка

Повну документацію та вихідний код наведено в репозиторії компонентів коду на GitHub.

Управління мерехтінням.

Опис

Цей компонент коду надає обгортку навколо елемента керування Fluent UI Shimmer , прив’язану до кнопки для використання на полотні та користувацьких сторінках.

Ключові властивості

Властивість Опис
Items Елементи дії для відображення
Rows Елементи дії для відображення
SpacebetweenShimmer Пробіл або проміжок між кожним мерехтінням у разі кількох рядів.

Властивості елементів

Кожен запис у наведеній нижче таблиці може мати вказані значення.

Властивість Опис
ItemKey Обов’язково. Ключ, який використовується для позначення конкретного елемента ShimmerElement. Ключі мають бути унікальними.
ItemType Обов’язково. Тип елемента Шиммер зі списку з трьох елементів мерехтіння, тобто коло, проміжок і лінія.
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 Приймає рядок JSON, створений за допомогою конструктора тем Fluent UI (windows.net). Якщо залишити це значення пустим, використовуватиметься тема, визначена Power Apps. Див. використання тем, щоб отримати вказівки щодо налаштування.
AccessibilityLabel Підпис aria-label для невізуальних екранів

Приклад теми

Рядок Theme JSON передається властивості компонента, тоді як varTheme може використовуватися для стилізації інших стандартних компонентів, як-от кнопки, з використанням окремих кольорів.

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

Обмеження

Цей компонент коду можна використовувати лише в компонованих програмах і настроюваних сторінках.