Meta 標籤
在您的 <head> 標籤內,<meta> 標籤提供標題和發布者的資訊,並讓我們能夠接收使用者輸入。有六種使用者可自訂的控制項:數字滑桿、色相滑桿、布林開關、顏色選擇器、文字欄位和下拉列表。每種控制項需要四個核心屬性,以及控制項特定的屬性。
| 核心屬性 | 說明 | |
|---|---|---|
| property | 定義要在您的程式碼中使用的變數名稱 | |
| label | 顯示給使用者的控制項介面文字標籤 | |
| type | 指定資料類型:number、hue、boolean 或 color | |
| default | 設定控制項使用的初始值 | |
| tooltip* | (*選用)當使用者將游標移至控制項上時顯示的簡短說明 |
數字滑桿讓使用者可以在特定範圍內選取整數。它常用於調整動畫執行速度、螢幕上顯示多少個形狀,或特效觸發頻率等參數。
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">實際效果如下:

數字滑桿需要兩個額外的屬性才能正常運作:
| 屬性 | 說明 |
|---|---|
| min | 設定使用者可以選擇的最低值。 |
| max | 設定使用者可以選擇的最高值。 |
色相滑桿讓使用者可以使用 HSL(色相、飽和度、亮度)色彩模型選取顏色色相。它通常用於基本顏色調整或選擇特效和元素的基礎顏色。
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">視覺上如下所示:

要正確運作,色相滑桿需要兩個額外的屬性:
| 屬性 | 說明 |
|---|---|
| min | 定義使用者可以選擇的最低色相值。最小可能值為 0 |
| max | 定義可用的最高色相值。最大可能值為 360 |
布林開關讓使用者可以在「開」和「關」兩種狀態之間切換。其值限制為 0(關)或 1(開)。與其他控制項不同,布林開關僅依賴預設屬性,不需要任何額外設定。
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>它常用於啟用或停用特定功能、在模式之間切換(如垂直和水平)、控制介面中的可見性和行為切換,或觸發特效重播。
顯示效果如下:

顏色選擇器讓使用者可以透過在標準 HSL 色彩模型中調整色相、飽和度和亮度分量來選取顏色。它是選擇顏色時最常用且最標準的工具,無論是用於背景還是螢幕上的元素。
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>視覺上如下所示:

顏色選擇器的預設值必須以十六進位格式指定。此外,它需要兩個額外的屬性:
| 屬性 | 說明 |
|---|---|
| min | 最小可選值,最低可能值為 0。 |
| max | 最大可選值,最高可能值為 360。 |
文字欄位(或文字輸入框)允許使用者輸入字元字串。每次在欄位中添加或移除字元時都會更新輸入。
<meta property="myText" label="Text Field" type="textfield" default="yourText">效果如下:

| 屬性 | 說明 |
|---|---|
| default | 可以不包含任何字元 |
列表讓使用者可以從預定義的值列表中選擇一個選項。例如,使用者可以在不同的角色選擇或特效之間切換以選取偏好的選項。
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>實際效果如下:

values 屬性定義所有可用的選項,而 default 屬性指定初始選取的選項。
| 屬性 | 說明 |
|---|---|
| values | 以逗號分隔的可能字串選項列表 |
| default | 設定預設選取的選項。如果此值未包含在 values 列表中,下拉列表將不顯示預設選擇,並可能導致問題。 |
如需從您的應用程式收集原始資料的更多資訊,請查看我們的智慧標籤頁面!