跳到內容

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 列表中,下拉列表將不顯示預設選擇,並可能導致問題。

如需從您的應用程式收集原始資料的更多資訊,請查看我們的智慧標籤頁面!