Picker 控制
用於提供搜尋體驗的控制項。
Note
完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。
描述
選擇器用於從大清單中選擇一個或多個項目,例如標籤或檔案。
選擇器程式碼元件可讓您在畫布應用程式和自訂頁面中使用 Fluent UI 選擇器功能表元件。
標籤選擇器程式碼元件提供以下功能:
- 會繫結到所選取標籤的輸入集合。
- 會繫結到建議標籤的輸入集合。
- 允許使用者從建議中選取或輸入任意文字標籤。
- 當使用者新增或移除標籤時,會引發變更時事件。
- 允許程式設計設定焦點。
資料集
標籤選擇器包含下列輸入資料集,本文後方的索引鍵屬性中將詳細描述這些資料集。
Tags
TagsDisplayName
Suggestions
SuggestionsDisplayName
SuggestionSubDisplayName
應使用 SearchTerm
輸出屬性篩選 Suggestions
資料集,例如:
Search(colSuggestions,TagPicker.SearchTerm,"name")
內容
索引鍵屬性
屬性 | 描述 |
---|---|
Items |
標籤的集合 (資料表)。 應用程式負責新增或移除標記,以回應元件引發的 [新增] 或 [移除] 事件 (如下列 OnChange 事件區段中所述)。 |
Suggestions_Items |
建議的集合 (資料表)。 |
TagMaxWidth |
呈現時標記的最大寬度。 溢出文字被省略符號截斷,而懸停工具提示會顯示完整文字。 |
AllowFreeText |
輸入值時,不要自動選擇第一個建議,以便可以提供自由文字項目,而不是從預先定義清單中進行選擇。 |
SearchTermToShortMessage |
當搜尋字詞小於 MinimumSearchTermLength 時顯示的訊息。 |
HintText |
未提供搜尋字詞時在選擇器中顯示的訊息。 |
NoSuggestionsFoundMessage |
當建議集合不包含結果時顯示的訊息。 |
MinimumSearchTermLength |
觸發建議彈出式視窗的最少字元數。 |
MaxTags |
可以新增的最大標記數。 在此編號之後,標記選擇器將重新使用,直到刪除標記。 |
Error |
當應顯示紅色錯誤邊框時,為 True。 |
Items
性能
屬性 | 描述 |
---|---|
TagsDisplayName |
設定為包含標籤顯示名稱的欄名稱。 |
Suggestions
性能
屬性 | 描述 |
---|---|
SuggestionsDisplayName |
設定為包含建議顯示名稱的資料行名稱。 |
SuggestionsSubDisplayName |
(選用) 設定為包含次要文字行的資料行名稱。 |
樣式屬性
屬性 | 描述 |
---|---|
Theme |
接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南,請參閱佈景主題。 |
FontSize |
選擇器內顯示標記的字體大小。 |
BorderRadius |
選擇器內顯示標記的框線半徑。 |
ItemHeight |
選擇器內顯示標記的高度 (像素)。 |
AccessibilityLabel |
螢幕助讀程式 aria-label |
事件屬性
屬性 | 描述 |
---|---|
Input Event |
設定為要傳送到 TagPicker 的事件 |
Output 屬性
屬性 | 描述 |
---|---|
SearchTerm |
輸入到標記選擇器中的文字,可用來篩選建議資料集。 |
TagsDisplayName |
觸發變更事件時,用來建立新標記的文字 |
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) )
);
限制
此程式碼元件只能在畫布應用程式和自訂頁面中使用。