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

Picker контроль

  • Стаття

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

Нотатка

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

Управління пікером.

Опис

Засоби вибору використовуються для вибору одного або кількох елементів, наприклад тегів або файлів, з великого списку.

Компоненти коду «Засіб вибору» дозволяють використовувати компоненти меню вибору Fluent UI всередині компонованих програм та настроюваних сторінок.

Компонент коду Tag Picker («Вибір тега») забезпечує такі функції:

  1. Прив’язується до колекції вхідних даних для вибраних тегів.
  2. Прив’язується до колекції вхідних даних для пропонованих тегів.
  3. Дає змогу користувачам вибирати з-поміж пропозицій або вводити довільний текстовий тег.
  4. Піднімає подію On Change («При зміні»), коли користувач додає або видаляє тег.
  5. Дає змогу програмним способом встановлювати фокус.

Набори даних

Засіб вибору тегів має наведені нижче вхідні набори даних, описані в Ключових властивостях пізніше в цій статті.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

Набір даних Suggestions слід фільтрувати за допомогою властивості виводу SearchTerm, наприклад:

Search(colSuggestions,TagPicker.SearchTerm,"name")

Властивості

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

Властивість Опис
Items Колекція (таблиця) тегів. Програма відповідає за додавання або видалення тегів у відповідь на виникнення подій додавання (Add) або видалення (Remove) (описані в наступному розділі про подію OnChange).
Suggestions_Items Колекція (таблиця) пропозицій.
TagMaxWidth Максимальна ширина тегів при відображенні. Переповнюючий текст буде скорочуватися із використанням трьох крапок, а при наведенні курсору відображатиметься підказка із повним текстом.
AllowFreeText Під час введення значення не слід автоматично вибирати перший варіант, щоб можна було надати безкоштовний текстовий запис, а не вибирати з попередньо визначеного списку.
SearchTermToShortMessage Повідомлення, яке відображатиметься, якщо умова пошуку («Search Term») коротша за MinimumSearchTermLength.
HintText Повідомлення, яке відображатиметься у засобі вибору, якщо умову пошуку не задано.
NoSuggestionsFoundMessage Повідомлення, яке відображатиметься, якщо колекція пропозицій («Suggestions») не міститиме результатів.
MinimumSearchTermLength Мінімальна кількість символів для виклику спливаючого вікна із пропозиціями.
MaxTags Максимальна кількість тегів, яку можна додати. Після досягнення цього числа засіб вибору тегів залишатиметься доступним лише для читання, поки не буде видалено який-небудь тег.
Error Істинно, якщо має відображатися червона межа для помилки.

Items Властивості

Властивість Опис
TagsDisplayName Укажіть ім’я стовпця, що містить коротке ім’я тега.

Suggestions Властивості

Властивість Опис
SuggestionsDisplayName Укажіть ім’я стовпця, що містить коротке ім’я пропозиції.
SuggestionsSubDisplayName (Необов’язково.) Укажіть ім’я стовпця, що містить допоміжний рядок тексту.

Властивості стилю

Властивість Опис
Theme Приймає рядок JSON, створений за допомогою конструктора тем Fluent UI (windows.net). Якщо залишити це значення пустим, використовуватиметься тема, визначена Power Apps. Див. використання тем, щоб отримати вказівки щодо налаштування.
FontSize розмір шрифту тегів, які відображаються в засобі вибору.
BorderRadius радіус межі тегів, які відображаються в засобі вибору.
ItemHeight висота тегів (пікселів), показаних усередині Picker.
AccessibilityLabel Підпис aria-label для невізуальних екранів

Властивості події

Властивість Опис
Input Event Установіть як подію, яку потрібно надсилати до TagPicker

Властивості, що виводяться

Властивість Опис
SearchTerm Текст, уведений у елементі вибору тегів, який можна використовувати для фільтрації набору даних пропозицій.
TagsDisplayName текст, який використовується для створення нового Тегу під час виклику події On Change
AutoHeight Якщо засіб вибору тегів переносяться на кілька рядків, властивість Auto Height («Автоматична висота») можна використовувати для керування висотою адаптивного контейнера.

Поведінка

Підтримує SetFocus як InputEvent.

Подія OnChange

Компонент TagPicker викликає подію OnChange під час додавання або видалення тегів. Використовуються такі властивості:

Властивість Опис
TagEvent Назва події, що виникла
TagKey Ключ елемента, який викликав подію (якщо подія пов’язана з тегом)

Подія має містити вираз, подібний до:

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

Обмеження

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