Mashup Builder > 小器具 > 標準小器具 > 文字區域小器具
文字區域小器具
「文字區域」小器具可讓混搭使用者在混搭中輸入多行文字。
* 
「文字區域」小器具可作為 ThingWorx 平台中的標準小器具使用,也可作為可從 SDL 匯入的 web 元件使用。
預設小器具大小
「文字區域」小器具大小視您 ThingWorx 的版本而有所不同:
在 ThingWorx 9.3.2 及更新版本中,小器具預設為回應式。當您將其新增至空白容器時,它會展開以填滿容器中的所有可用空間。
在舊版 ThingWorx 中,小器具有預設寬度與高度,您可使用內容手動予以調整。
當您移轉至 ThingWorx 9.3.2 或更新版本時,在容器內顯示為單一小器具的「文字區域」小器具將會填滿容器中的所有可用空間。此變更可能會影響您混搭的版面配置。欲更新版面配置,請務必調整混搭版面配置。如需詳細資訊,請參閱下列部份。
ThingWorx 9.3.1 及更早版本的小器具大小
依預設,「文字區域」會使用預設寬度與高度尺寸顯示。寬度會設定為固定值。但是,高度會設定為 Autosize,以允許小器具垂直增大。隨著您的鍵入,小器具會增大,以在文字超過可用空間時顯示其他字元,直到達到在 MaxNumberOfCharacters 內容中定義的值為止。您可以使用「版面配置」面板中的對齊與分佈選項來新增其他小器具及控制版面配置。下圖顯示了混搭版面配置中的小器具:
版面配置的劃分方式如下:
1. 一個回應式容器,其包含四個小器具:一個「標籤」、兩個「文字欄位」以及一個「文字區域」。
2. 一個固定容器,其包含兩個按鈕。
小器具寬度會設定為固定值。但是,高度會設定為 Autosize,以允許小器具在字元數超過可用空間時垂直展開。您可使用 WidthHeight 內容調整小器具大小。會顯示省略號。
ThingWorx 9.3.2 及更新版本的小器具大小
當您將小器具新增至新的或現有混搭時,會根據其容器大小來設定其預設尺寸。小器具會自動增大,以填滿容器內的可用空間。欲相對於版面配置調整小器具尺寸,您必須使用 Layout 面板配置容器版面配置。當在容器中展開小器具時,WidthHeight 內容不會列在「內容」面板中。將其他小器具新增至「文字區域」容器會恢復為較早的大小。下圖顯示了 ThingWorx Platform 9.3.2 版或更新版本之回應式容器中的小器具。
版面配置的劃分方式如下:
1. 一個具有固定高度的靜態容器,其包含三個小器具:一個「標籤」小器具與兩個「文字欄位」小器具。項目方向設定為「垂直」
2. 一個回應式容器,其具有一個「文字區域」小器具。
3. 一個靜態容器,其顯示了兩個按鈕。
使用單獨的容器來顯示小器具可讓您建立更具回應式的版面配置。下圖顯示了之前的有更多空間可用於混搭時的表單。請注意,文字區域會隨其容器一起增大,文字欄位會保持大小不變。
小器具內容
「文字區域」小器具的內容如下所列。
屬性名稱
描述
基礎類型
預設值
可繫結? (Y/N)
可當地語系化? (Y/N)
Text
文字區域中顯示的文字。
STRING
n/a
Y
Y
Label
顯示為文字區域標籤的文字。
STRING
n/a
Y
Y
Counter
計算並顯示在文字區域中輸入的字元數。
BOOLEAN
False
N
N
MaxNumberOfCharacters
可讓您設定文字區域中允許的最大字元數。
NUMBER
100
Y
N
HintText
顯示預留位置文字,說明應在欄位中輸入的內容。
STRING
n/a
N
Y
Disabled
使用此內容可禁用混搭中的小器具。小器具會顯示在混搭中,但您無法按一下。
BOOLEAN
False
Y
N
ReadOnly
可讓您將文字區域設定為唯讀,且使用者無法編輯包含的文字。
BOOLEAN
False
N
N
TextAlignment
可讓您向左或向右對齊文字。
STRING
N
N
LabelAlignment
可讓您向左、向右或置中對齊標籤。
STRING
N
N
TabSequence
使用者按下 Tab 鍵時小器具反白的順序。
NUMBER
n/a
N
N
CustomClass
可讓您定義小器具頂部分區之 CSS。可輸入多個類別,之間以空格分隔。
STRING
n/a
Y
N
Changed
修改資料時所觸發的事件。
n/a
n/a
Y
N
ResetToDefaultValue
將此小器具的輸入重設為其預設值。
n/a
n/a
Y
N
Width
小器具寬度。
在 ThingWorx 9.3.2 或更新版本中,除非您將小器具新增至具有一或多個小器具的容器,否則此內容會隱藏。
NUMBER
273
N
N
Height
小器具高度。預設會自動計算。在內容面板中輸入值或將畫布中的小器具重定大小,以設定固定高度。在 ThingWorx 9.3.2 或更新版本中,除非您將小器具新增至具有一或多個小器具的容器,否則此內容會隱藏。
NUMBER
自動調整
N
N
MinWidth
設定當在 ThingWorx 9.3.2 或更新版本中將小器具新增至回應式容器時,小器具的最小寬度。
NUMBER
n/a
N
N
TextChanged
當您在更新小器具值之後按一下小器具外的區域時,觸發的可繫結事件。
n/a
n/a
Y
N
TooltipField
設定將游標置於小器具上時顯示的工具提示文字。
STRING
n/a
Y
Y
TooltipIcon
為小器具的工具提示設定圖示圖像。
您可以新增圖像或指定圖像 URL 路徑。
MEDIA ENTITY
n/a
N
N
驗證小器具資料
除了通用驗證內容以外,您還可以使用 MaxLengthMinLength 內容來驗證「文字區域」小器具中的字元數。
您可以使用 MaxLengthFailureMessageMinLengthFailureMessage 內容自訂預設失敗訊息。使用 ${value} 參數,最大值與最小值會顯示在訊息中。
如需有關使用通用驗證內容的詳細資訊,請參閱將驗證套用至小器具
下表列出了 ThingWorx 9.3.4 或更新版本中「驗證」面板上可用的驗證內容。
內容
描述
基礎類型
預設值
是否可繫結 (Y/N)
可當地語系化 (Y/N)
CriteriaMessage
為驗證條件以及驗證失敗時顯示的訊息。
STRING
n/a
Y
Y
CriteriaMessageDetails
為驗證條件和失敗訊息顯示的詳細資訊。
STRING
n/a
Y
Y
MaxLength
文字區域值的最大長度。
STRING
n/a
Y
N
MaxLengthFailureMessage
目前值超過最大字元長度時顯示的訊息。
STRING
${value} characters is the maximum
Y
Y
MinLength
文字區域值的最小長度。
STRING
n/a
Y
N
MinLengthFailureMessage
目前值小於最小字元長度時顯示的訊息。
STRING
${value} characters is the minimum
Y
Y
RequiredMessage
當「必須填寫值」設定為 true 且未選取項目時顯示的訊息。
STRING
需要有值
Y
Y
ShowValidationCriteria
編輯文字區域時,顯示有關所需輸入的提示訊息。
BOOLEAN
False
Y
N
ShowValidationFailure
當所輸入值未通過驗證時顯示失敗訊息。
BOOLEAN
False
Y
N
ShowValidationSuccess
當所輸入值成功通過驗證時,顯示成功訊息。
BOOLEAN
False
Y
N
SuccessMessage
驗證成功時顯示的訊息。
STRING
n/a
Y
Y
SuccessMessageDetails
顯示有關驗證成功訊息之詳細資訊的次要訊息。
STRING
n/a
Y
Y
Validate
小器具值變更時觸發的可繫結事件。將此事件繫結至服務或函數以套用驗證模式或運算式。
event
n/a
Y
N
ValidationCriteriaIcon
選取要在驗證條件的提示訊息中顯示的 SVG 圖示。
IMAGELINK
info
N
N
ValidationFailureIcon
設定當驗證失敗時要在狀況訊息中顯示的 SVG 圖示。
IMAGELINK
error
N
N
ValidationOutput
擷取小器具驗證的輸出。傳回的值為 UndefinedValidUnvalidatedInvalid
STRING
n/a
Y
N
ValidationState
這是設定驗證狀態的可繫結內容。您可以將此內容設定為 UndefinedUnvalidatedValidInvalid
STRING
Undefined
Y
N
ValidationSuccessIcon
選取當驗證成功時要在狀況訊息中顯示的 SVG 圖示。
IMAGELINK
success
N
N
ValueRequired
需選取清單中某一項目。
BOOLEAN
False
Y
N
這是否有幫助?