瞭解CSS和LESS架構。
文章會列出可公開使用的最適化表單css類別。 您可以利用這些類別來設定最適化表單的各種元件樣式。 撰寫元件的樣式,例如顯示警告的對話方塊和狀態列,超出本文的範圍。 只有當您無法使用主題編輯器來設定元件樣式時,才可使用這些樣式結構來建立樣式(使用CSS或更少)。
LESS架構可簡化使用案例,以自訂最適化表單的樣式。 此架構可讓您使用一組變數和函式(混合)來定義樣式。 LESS框架有助於減少捆綁代碼的大小並增加其可重用性。
您可以以下列方式自訂最適化的表單樣式:
您可以變更最適化表單的主題,以確保其外觀與嵌入最適化表單的網頁一致。
使用CSS屬性變更最適化表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定與感覺」的重大變更(例如元件版面配置和位置的變更)不會視為主題變更。
以引導為基礎,下列CSS屬性集會定義網頁的主題:
目前,LESS變數僅針對自適應形式中各種元素的這些屬性進行定義。
您可以變更元素的外觀、版面、位置和可見度。 若要完成此工作,請建立或更新您的自訂。css檔案,以包含本文中所列的樣式結構。
若要將樣式套用至最適化表單,請在中開啟最適化表單以進行編輯,開啟最適化表單容器的屬性,然後在基本索引標籤中指定自訂CSS檔案的路徑。 預設最適化表單的樣式建構,並以自訂。css檔案中所列的建構值覆寫。
本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者,您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。
容器是頂層元件。 其他面板和欄位位於容器元件下方。
CSS 類別 |
|
變數說明 |
變數說明 |
|
容器的背景顏色 |
|
容器的填充 |
|
容器的邊界 |
|
容器的字型顏色 |
最適化表單包括各種欄位類型。 每個欄位都有一個唯一的類名,即欄位的名稱。 該欄位還具有公用類名guideFieldNode
。
欄位包括標籤、Widget、說明說明(包括長篇和短篇說明)和欄位說明圖示(問號)。
CSS 類別 |
|
變數 |
說明 |
|
欄位填補 |
|
欄位錯誤消息的字型顏色 |
|
欄位錯誤訊息的字型大小 |
用於欄位的HTML元素label包括left或top類,具體取決於標籤在頂部還是左側。
CSS 類別 |
|
變數 |
說明 |
|
欄位標籤的字型顏色 |
|
欄位標籤的字型大小 |
|
欄位標籤的CSS行高屬性 |
|
欄位標籤的CSS字型粗細屬性 |
|
欄位標籤的邊界 |
標籤的CSS規則是使用guideFieldLabel標籤套用。 如果您是作者,請覆寫此規則,讓您的自訂變更可見。
Widget也會依其類型而包含類別。 通常,Widget包含guideFieldWidget
類別。 隨HTML提供的Widget通常使用標準HTML元素輸入並選取。 樣式會據此進行。 您無法變更變數,以自訂介面工具集的樣式設定。
CSS 類別 |
|
變數 |
說明 |
|
Widget的背景顏色(不適用於核取方塊和選項按鈕) |
|
Widget的邊框顏色 |
|
Widget的邊框大小 |
|
Widget的邊框半徑 |
|
Widget的邊框類型 |
|
介面工具集邊框的焦點類型 |
|
Widget的合併邊框樣式 |
|
介面工具集內文字的顏色 |
|
介面工具集內的文字大小 |
|
介面工具集的CSS線條高度屬性 |
|
介面工具集的CSS填補屬性 |
|
介面工具集聚焦時的邊框顏色 |
|
強制欄位的介面工具集邊框顏色 |
|
強制欄位的介面工具集背景顏色 |
|
停用欄位時介面工具集的背景顏色 |
|
停用欄位時介面工具集的字型顏色 |
|
停用欄位時介面工具集的邊框顏色 |
|
介面工具集的高度(無法用於核取方塊和選項按鈕) |
|
核取方塊和選項按鈕的高度。 |
|
多選下拉式清單的最高高度 |
焦點、強制和停用欄位的樣式會使用變數加以限制。 不過,您可以覆寫樣式來變更樣式。 使用變數的限制主要是為了保持變數數目的檢查。 如果場的外觀發生顯著變化,則可以放鬆限制,因為它位於前面討論的任何狀態中。
作者可以使用簡短和詳細說明元件,在欄位中指定說明內容。 這兩個元件都具有公用類.guideHelpDescription
和另一個類.long
/ .short
,具體取決於說明類型。 「說明」內容會隨附在段落元素中,以覆寫說明的樣式。 說明說明(包括長篇和短篇)會使用以widgetshelp開頭的變數來修改,如下表所述:
變數 |
說明 |
|
Widget的背景顏色長篇說明 |
|
Widget的邊框顏色長篇說明 |
|
Widget的左指示符邊框顏色長說明 |
|
Widget的背景顏色簡短說明 |
|
Widget的字型顏色說明 |
|
Widget的背景顏色簡短工具提示說明 |
|
Widget的字型顏色簡短工具提示說明 |
「條款與條件」(TnC
)介面工具集可讓您指定條款與條件。 您可以使用下表所述的變數來自訂介面工具集。
變數 |
說明 |
tnc-unvisited |
未瀏覽的tnc連結的字型顏色。 |
tnc-visited |
已造訪的tnc連結的字型顏色。 |
按鈕也是Widget。 不過,其樣式與Widget略有不同。 在最適化表單中,下列任一項皆構成按鈕:
按鈕的HTML程式碼:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS 類別 |
說明 |
|
提供按鈕的圖示 |
|
樣式按鈕標籤/標題 |
變數 |
說明 |
|
按鈕的邊框大小 |
|
邊框類型 |
|
按鈕的CSS填補屬性 |
|
按鈕的字型大小 |
|
按鈕的背景顏色 |
|
按鈕的字型顏色 |
|
按鈕的邊框顏色 |
|
大按鈕的間距(類別為。buttonlarge的按鈕) |
|
大型按鈕的字型大小 |
|
小按鈕的間距(類別為。buttonsmall的按鈕) |
|
小按鈕的字型大小 |
|
資訊按鈕的背景顏色(具有類別。buttoninforment的按鈕) |
|
提供資訊的按鈕的字型顏色 |
|
資訊按鈕的邊框顏色 |
|
警告樣式的按鈕的背景顏色(具有類。buttonwarning的按鈕) |
|
警告樣式化按鈕的字型顏色 |
|
警告樣式化按鈕的邊框顏色 |
|
警報按鈕的背景顏色(具有類。buttonalert的按鈕) |
|
警報按鈕的字型顏色 |
|
警報按鈕的邊框顏色 |
對於介面工具集,當作者在「說明」內容中新增詳細說明時,就會顯示問號。 使用引導中提供的預設表徵圖。 若要使用自訂圖示,您可以自訂引導圖示。
CSS 類別 |
|
變數 |
說明 |
|
表徵圖顏色 |
|
滑鼠停留在圖示上方時的圖示顏色 |
您可以使用下列變數,變更表格標題列和內文列的色彩主題。
變數 |
說明 |
|
標題列的背景顏色。 預設值為 |
|
奇數內文行的背景顏色。 預設值為 |
|
偶數內文行的背景顏色。 預設值為 |
最適化表單的檔案附件Widget可讓您上傳檔案。 您也可以使用變數自訂介面工具集。
變數 |
說明 |
|
填充介面工具集中顯示的檔案 |
|
檔案項目的背景顏色 |
|
上邊框的邊框顏色 |
|
檔案項目的字型顏色 |
|
介面工具集中「預覽」圖示(引導表徵圖)的顏色 |
|
檔案項目的註解高度 |
導覽標籤有四種類型。 這些頁籤包括嚮導和accordion中左側、頂部的頁籤。 每個導航器都有不同的類。
導覽器 |
CSS 類別 |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab導覽器 |
|
.wizard-navigators |
以下是Tab導覽器元素的HTML程式碼(類似於引導標籤):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/%3E%60%60%3Cbutton%20name=?lang=zh-Hant"Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
您可以使用CSS規則來變更導覽器的樣式,這些規則會使用後代選擇器來選取元素。 例如,若要新增文字裝飾樣式至錨記:
上方的標籤導覽器:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
此外,還有類可根據索引標籤導覽器是否具有巢狀/子/子導覽器,來設定索引標籤導覽器的樣式(左側和上側)。
CSS 類別 |
說明 |
|
具有巢狀/子/子導覽器的標籤導覽器(左側和上側) |
|
沒有巢狀/子/子導覽器的標籤導覽器(左側和上方) |
guideNavIcon類別提供標籤導覽器(左側和上側)和精靈導覽器的預設圖示。
CSS 類別 |
|
您可以在製作時在面板上提供CSS類別,以<CLASS_NAME>格式,來變更特定導覽器的圖示。 您可以為導航器表徵圖添加**<CLASS_NAME>_nav**。
變數 |
說明 |
標籤導覽器 |
|
|
整個標籤導覽器的背景顏色 |
|
標籤的背景顏色 |
|
標籤的字型顏色 |
|
暫留時標籤的背景顏色 |
|
暫留時標籤的字型顏色 |
|
當面板處於焦點時的背景顏色(活動) |
|
面板焦點時的字型顏色 |
|
當面板的完成運算式傳回true時的背景顏色 |
|
當面板的完成運算式傳回true時,字型顏色 |
|
當面板已聚焦一次但完成運算式傳回false時的背景顏色 |
|
當面板已聚焦一次但完成運算式傳回false時,字型顏色 |
|
頁籤的邊框顏色 |
|
標籤的字型大小 |
|
頁籤的填充 |
|
標籤的邊界 |
|
垂直標籤的邊界 |
|
標籤的邊框大小 |
|
制表符的最小高度 |
|
嵌套標籤的縮排 |
精靈導覽器 |
|
|
整個精靈導覽器的背景顏色 |
|
精靈的背景顏色 |
|
精靈的字型顏色 |
|
當面板處於焦點時的背景顏色(活動) |
|
當面板處於焦點時的字型顏色(聚焦) |
|
當面板的完成運算式傳回true時的背景顏色 |
|
當面板的完成運算式傳回true時,字型顏色 |
|
當面板已聚焦一次但完成運算式傳回false時,背景顏色 |
|
當面板已聚焦一次但完成運算式傳回false時,字型顏色 |
|
精靈的色彩 |
|
精靈的字型大小 |
|
嚮導的填充 |
|
嚮導的邊框大小 |
|
精靈導覽器項目符號的邊框顏色(在標題/標籤前面加上預設) |
|
嚮導導航器進度欄的背景顏色 |
|
為進度列填色顏色 |
收合式導覽器 |
|
|
accordion的填充 |
「面板」包含選用工具列及其內容。
CSS 類別 |
|
變數 |
說明 |
|
面板的背景顏色 |
|
面板文字的字型大小 |
|
面板文字的字型顏色 |
|
在面板內填充 |
|
面板說明的字型大小 |
|
面板說明的填充 |
|
面板說明的背景顏色 |
|
面板說明的指示符邊框顏色 |
面板節點被分為導覽器和內容。
不是內容的單獨樣式元件。 描述的變數會套用在導覽器和內容上。
最上方的面板(RootPanel)沒有此類。
這些變數會影響行動裝置或小型螢幕裝置上可見的標題列,這些裝置包含面板標題以及下一個和後一個導覽器。
CSS 類別 |
|
變數 |
說明 |
|
標題列的背景顏色 |
|
標題列內文字的字型顏色 |
|
標題欄的間距 |
這些變數會影響「捲動」指示器,此指示器是顯示在行動裝置或小型螢幕裝置上的橙色箭頭。 「捲動」指示符指示螢幕的可見部分以外有內容。 您可以向下捲動以檢視。 當您按下內容結尾時,箭頭會消失。
CSS 類別 |
|
變數 |
說明 |
|
從下到下的捲軸器固定位置 |
|
捲軸器右側固定位置 |
|
捲動器寬度 |
|
捲軸器高度 |
下表中的這些變數會影響行動固定工具列的版面配置。
CSS 類別 |
|
變數 |
說明 |
|
固定工具列在行動裝置上的下方位置 |
|
固定工具列在行動裝置上的位置,從上方 |
|
固定工具列在行動裝置上的左側位置 |
|
固定工具列在行動裝置上的右側位置 |
|
修正工具列按鈕圖示的上方位置 |
|
行動裝置上工具列按鈕圖示的寬度 |
|
行動裝置上工具列按鈕圖示的高度 |
|
行動裝置上工具列的背景顏色 |
簡單註冊主題/etc/clientlibs/fd/af/guidetheme/simpleEnrollment和類別guide.theme.simpleEnrollment
也引入了一些變數。 如果您想要建立增強簡單註冊的主題,可以使用下列「額外變數」:
變數 |
說明 |
|
焦點按鈕的背景顏色 |
|
暫留時按鈕的背景顏色 |
|
按鈕半徑 |
|
導覽按鈕的背景顏色(上/下一頁) |
|
暫留時的導覽按鈕(上/下一頁)的背景顏色 |
|
首次呈現時,精靈導覽器和對應進度列的背景顏色。 |
|
當前/活動嚮導導航器和相應進度條的背景顏色 |
|
已瀏覽的精靈導覽器和對應進度列的背景顏色。 |
|
將邊框顏色分叉的容器分成導覽器和面板 |
|
左側標籤的底部邊框顏色分隔標籤(標籤導覽器)。 |
|
導覽器巢狀/子/子導覽器的背景顏色 |