最適化表單的樣式構造

必備條件

瞭解CSS和LESS架構。

可自訂的

文章會列出可公開使用的最適化表單css類別。 您可以利用這些類別來設定最適化表單的各種元件樣式。 撰寫元件的樣式，例如顯示警告的對話方塊和狀態列，超出本文的範圍。 只有當您無法使用主題編輯器來設定元件樣式時，才可使用這些樣式結構來建立樣式（使用CSS或更少）。

自訂最適化表單中的樣式

LESS架構可簡化使用案例，以自訂最適化表單的樣式。 此架構可讓您使用一組變數和函式（混合）來定義樣式。 LESS框架有助於減少捆綁代碼的大小並增加其可重用性。

您可以以下列方式自訂最適化的表單樣式：

  • 變更主題
  • 更改元件的樣式

變更主題

您可以變更最適化表單的主題，以確保其外觀與嵌入最適化表單的網頁一致。

使用CSS屬性變更最適化表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定與感覺」的重大變更（例如元件版面配置和位置的變更）不會視為主題變更。

以引導為基礎，下列CSS屬性集會定義網頁的主題：

  • 背景色彩
  • 邊框（文字、顏色、粗細）
  • 字型色彩
  • 邊距
  • 邊距
  • 字型大小
  • LineHeight

目前，LESS變數僅針對自適應形式中各種元素的這些屬性進行定義。

更改元件樣式

您可以變更元素的外觀、版面、位置和可見度。 若要完成此工作，請建立或更新您的自訂。css檔案，以包含本文中所列的樣式結構。

若要將樣式套用至最適化表單，請在中開啟最適化表單以進行編輯，開啟最適化表單容器的屬性，然後在基本索引標籤中指定自訂CSS檔案的路徑。 預設最適化表單的樣式建構，並以自訂。css檔案中所列的建構值覆寫。

元件

本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者，您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。

容器樣式

容器是頂層元件。 其他面板和欄位位於容器元件下方。

CSS 類別

guideContainerNode

變數說明

變數說明

container-bgColor

容器的背景顏色

container-padding

容器的填充

container-margin

容器的邊界

container-fontColor

容器的字型顏色

欄位樣式

最適化表單包括各種欄位類型。 每個欄位都有一個唯一的類名，即欄位的名稱。 該欄位還具有公用類名guideFieldNode。

欄位包括標籤、Widget、說明說明（包括長篇和短篇說明）和欄位說明圖示（問號）。

CSS 類別

guideFieldNode

變數

說明

field-padding

欄位填補

field-error-font-color

欄位錯誤消息的字型顏色

field-error-font-size

欄位錯誤訊息的字型大小

標籤樣式

用於欄位的HTML元素​label​包括​left​或​top​類，具體取決於標籤在頂部還是左側。

CSS 類別

guideFieldLabel

變數

說明

label-font-color

欄位標籤的字型顏色

label-font-size

欄位標籤的字型大小

label-line-height

 欄位標籤的CSS行高屬性

label-font-weight

 欄位標籤的CSS字型粗細屬性

label-margin

欄位標籤的邊界

標籤的CSS規則是使用​guideFieldLabel​標籤套用。 如果您是作者，請覆寫此規則，讓您的自訂變更可見。

Widget樣式

Widget也會依其類型而包含類別。 通常，Widget包含guideFieldWidget類別。 隨HTML提供的Widget通常使用標準HTML元素輸入並選取。 樣式會據此進行。 您無法變更變數，以自訂介面工具集的樣式設定。

CSS 類別

guideFieldWidget

變數

說明

widgets-bg-color

 Widget的背景顏色（不適用於核取方塊和選項按鈕）

widgets-border-color

Widget的邊框顏色

widgets-border-thickness

Widget的邊框大小

widgets-border-radius

Widget的邊框半徑

widgets-border-type

Widget的邊框類型

widget-border-focus-type

介面工具集邊框的焦點類型

widgets-border

Widget的合併邊框樣式

widgets-font-color

介面工具集內文字的顏色

widgets-font-size

介面工具集內的文字大小

widgets-line-height

 介面工具集的CSS線條高度屬性

widgets-padding

介面工具集的CSS填補屬性

widgets-focus-border-color

介面工具集聚焦時的邊框顏色

widgets-mandatory-border-color

強制欄位的介面工具集邊框顏色

widgets-mandatory-bg-color

強制欄位的介面工具集背景顏色

widgets-disabled-bg-color

停用欄位時介面工具集的背景顏色

widgets-disabled-font-color

停用欄位時介面工具集的字型顏色

widgets-disabled-border-color

停用欄位時介面工具集的邊框顏色

widget-height

 介面工具集的高度（無法用於核取方塊和選項按鈕）

checkbutton-height

核取方塊和選項按鈕的高度。

listboxwidget-height

多選下拉式清單的最高高度

介面工具集樣式的限制

焦點、強制和停用欄位的樣式會使用變數加以限制。 不過，您可以覆寫樣式來變更樣式。 使用變數的限制主要是為了保持變數數目的檢查。 如果場的外觀發生顯著變化，則可以放鬆限制，因為它位於前面討論的任何狀態中。

幫助說明

作者可以使用簡短和詳細說明元件，在欄位中指定說明內容。 這兩個元件都具有公用類.guideHelpDescription和另一個類.long/ .short，具體取決於說明類型。 「說明」內容會隨附在段落元素中，以覆寫說明的樣式。 說明說明（包括長篇和短篇）會使用以widgetshelp開頭的變數來修改，如下表所述：

變數

說明

widgets-help-long-bg-color

Widget的背景顏色長篇說明

widgets-help-long-border-color

Widget的邊框顏色長篇說明

widgets-help-long-border-indicator-color

Widget的左指示符邊框顏色長說明

widgets-help-short-bg-color

Widget的背景顏色簡短說明

widgets-help-short-color

Widget的字型顏色說明

widgets-help-short-tooltip-bg-color

Widget的背景顏色簡短工具提示說明

widgets-help-short-tooltip-color

Widget的字型顏色簡短工具提示說明

條款和條件

「條款與條件」(TnC )介面工具集可讓您指定詞語與條件。 您可以使用下表所述的變數來自訂介面工具集。

變數

說明
tnc-unvisited 未瀏覽的tnc連結的字型顏色。
tnc-visited 已造訪的tnc連結的字型顏色。

按鈕

按鈕也是Widget。 不過，其樣式與Widget略有不同。 在最適化表單中，下列任一項皆構成按鈕：

  • input[type = text]
  • 按鈕
  • 元素與類別。button

按鈕的HTML程式碼：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS 類別

說明

iconButton-icon

提供按鈕的圖示

iconButton-label

樣式按鈕標籤／標題

變數

說明

button-border-size

按鈕的邊框大小

button-border-type

邊框類型

button-padding

按鈕的CSS填補屬性

button-font-size

按鈕的字型大小

button-background-color

按鈕的背景顏色

button-font-color

按鈕的字型顏色

button-border-color

按鈕的邊框顏色

button-large-padding

大按鈕的間距（類別為。buttonlarge的按鈕）

button-large-font-size

大型按鈕的字型大小

button-small-padding

小按鈕的間距（類別為。buttonsmall的按鈕）

button-small-font-size

小按鈕的字型大小

button-info-background-color

資訊按鈕的背景顏色（具有類別。buttoninforment的按鈕）

button-info-font-color

提供資訊的按鈕的字型顏色

button-info-border-color

資訊按鈕的邊框顏色

button-warning-background-color

警告樣式的按鈕的背景顏色（具有類。buttonwarning的按鈕）

button-warning-font-color

警告樣式化按鈕的字型顏色

button-warning-border-color

警告樣式化按鈕的邊框顏色

button-alert-background-color

警報按鈕的背景顏色（具有類。buttonalert的按鈕）

button-alert-font-color

警報按鈕的字型顏色

button-alert-border-color

警報按鈕的邊框顏色

問號

對於介面工具集，當作者在「說明」內容中新增詳細說明時，就會顯示問號。 使用引導中提供的預設表徵圖。 若要使用自訂圖示，您可以自訂引導圖示。

CSS 類別

guideHelpQuestionMark

變數

說明

questionmark-font-color

表徵圖顏色

questionmark-hover-font-color

滑鼠停留在圖示上方時的圖示顏色

表格

您可以使用下列變數，變更表格標題列和內文列的色彩主題。

變數

說明

table-header-bg-color

標題列的背景顏色。 預設值為 #333.

table-odd-row-bg-color

奇數內文行的背景顏色。 預設值為 rgb(255, 255, 255).

table-even-row-bg-color

偶數內文行的背景顏色。 預設值為 #eee.

檔案附件

最適化表單的檔案附件Widget可讓您上傳檔案。 您也可以使用變數自訂介面工具集。

變數

說明

fileItemPadding

填充介面工具集中顯示的檔案

fileItemBackground

檔案項目的背景顏色

fileItemBorderColor

上邊框的邊框顏色

fileItemColor

檔案項目的字型顏色

filePreviewIconColor

介面工具集中「預覽」圖示(Bootstrap圖示)的色彩

fileItemCommentHeight

檔案項目的註解高度

導覽標籤有四種類型。 這些頁籤包括嚮導和accordion中左側、頂部的頁籤。 每個導航器都有不同的類。

導覽器

CSS 類別

Accordion

.accordion-navigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab導覽器

Wizard

.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"/>

<button name="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 類別

說明

nested_true

具有巢狀／子/子導覽器的標籤導覽器（左側和上側）

nested_false

沒有巢狀／子/子導覽器的標籤導覽器（左側和上方）

guideNavIcon類別提供標籤導覽器（包括左側和上方）和精靈導覽器的預設圖示。

CSS 類別

guideNavIcon
注意

您可以在製作時在面板上提供CSS類別，以<CLASS_NAME>格式，來變更特定導覽器的圖示。 您可以為導航器表徵圖添加​**<CLASS_NAME>_nav**。

變數

說明

標籤導覽器

navigator-bg-color

整個標籤導覽器的背景顏色

tabs-bg-color

標籤的背景顏色

tabs-font-color

標籤的字型顏色

tabs-hover-bg-color

暫留時標籤的背景顏色

tabs-hover-font-color

暫留時標籤的字型顏色

tabs-active-bg-color

當面板處於焦點時的背景顏色（活動）

tabs-active-font-color

面板焦點時的字型顏色

tabs-completed-bg-color

當面板的完成運算式傳回true時的背景顏色

tabs-completed-font-color

當面板的完成運算式傳回true時，字型顏色

tabs-stepped-bg-color

 當面板已聚焦一次但完成運算式傳回false時的背景顏色

tabs-stepped-font-color

 當面板已聚焦一次但完成運算式傳回false時，字型顏色

tabs-border-color

頁籤的邊框顏色

tabs-font-size

標籤的字型大小

tabs-padding

頁籤的填充

tabs-margin

標籤的邊界

tabs-vertical-margin

垂直標籤的邊界

tabs-border-thickness

標籤的邊框大小

tabs-min-height

制表符的最小高度

heirarichal-indent

嵌套標籤的縮排

精靈導覽器

wizard-navigator-bg-color

 整個精靈導覽器的背景顏色

wizard-tabs-bg-color

精靈的背景顏色

wizard-tabs-font-color

精靈的字型顏色

wizard-tabs-active-bg-color

當面板處於焦點時的背景顏色（活動）

wizard-tabs-active-font-color

當面板處於焦點時的字型顏色（聚焦）

wizard-tabs-completed-bg-color

當面板的完成運算式傳回true時的背景顏色

wizard-tabs-completed-font-color

當面板的完成運算式傳回true時，字型顏色

wizard-tabs-stepped-bg-color

 當面板已聚焦一次但完成運算式傳回false時，背景顏色

wizard-tabs-stepped-font-color

當面板已聚焦一次但完成運算式傳回false時，字型顏色

wizard-tabs-border-color

精靈的色彩

wizard-tabs-font-size

精靈的字型大小

wizard-tabs-padding

嚮導的填充

wizard-tabs-border-thickness

嚮導的邊框大小

wizard-nav-bullet-border

精靈導覽器項目符號的邊框顏色（在標題／標籤前面加上預設）

wizard-progress-bg-color

嚮導導航器進度欄的背景顏色

wizard-progress-color

為進度列填色顏色

收合式導覽器

accordion-tabs-padding

accordion的填充

面板樣式

「面板」包含選用工具列及其內容。

CSS 類別

guidePanelNode

變數

說明

panel-background-color

面板的背景顏色

panel-font-size

面板文字的字型大小

panel-font-color

面板文字的字型顏色

panel-padding

在面板內填充

panel-description-font-size

面板說明的字型大小

panel-description-padding

面板說明的填充

panel-help-bg-color

面板說明的背景顏色

panel-help-border-indicator-color

面板說明的指示符邊框顏色

面板節點被分為導覽器和內容。 不是內容的單獨樣式元件。 描述的變數會套用在導覽器和內容上。

最上方的面板(RootPanel)沒有此類。

行動樣式

標題欄

這些變數會影響行動裝置或小型螢幕裝置上可見的標題列，這些裝置包含面板標題以及下一個和後一個導覽器。

CSS 類別

guide-header-bar

變數

說明

headerbar-background-color

標題列的背景顏色

headerbar-font-color

標題列內文字的字型顏色

headerbar-padding

標題欄的間距

滾動指示器

這些變數會影響「捲動」指示器，此指示器是顯示在行動裝置或小型螢幕裝置上的橙色箭頭。 「捲動」指示符指示螢幕的可見部分以外有內容。 您可以向下捲動以檢視。 當您按下內容結尾時，箭頭會消失。

CSS 類別

mobileScrollIndicator

變數

說明

scrollIndicatorBottom

從下到下的捲軸器固定位置

scrollIndicatorRight

捲軸器右側固定位置

scrollIndicatorWidth

捲動器寬度

scrollIndicatorHeight

捲軸器高度

行動裝置固定工具列版面特定變數

下表中的這些變數會影響行動固定工具列的版面配置。

CSS 類別

mobileToolbar

變數

說明

mobileToolbarBottom

固定工具列在行動裝置上的下方位置

mobileToolbarTop

固定工具列在行動裝置上的位置，從上方

mobileToolbarLeft

固定工具列在行動裝置上的左側位置

mobileToolbarRight

固定工具列在行動裝置上的右側位置

mobileButtonIconTopMargin

修正工具列按鈕圖示的上方位置

mobileButtonIconWidth

行動裝置上工具列按鈕圖示的寬度

mobileButtonIconHeight

行動裝置上工具列按鈕圖示的高度

mobilefixedtoolbarbgcolor

行動裝置上工具列的背景顏色

主題特定變數

簡單註冊​主題/etc/clientlibs/fd/af/guidetheme/simpleEnrollment和類別guide.theme.simpleEnrollment也引入了一些變數。 如果您想要建立增強簡單註冊的主題，可以使用下列「額外變數」:

變數

說明

button-focus-bg-color

焦點按鈕的背景顏色

button-hover-bg-color

暫留時按鈕的背景顏色

button-radius

按鈕半徑

navigation-button-bg-color

導覽按鈕的背景顏色（上／下一頁）

navigation-button-bg-hover-color

暫留時的導覽按鈕（上／下一頁）的背景顏色

initial-nav-color

首次呈現時，精靈導覽器和對應進度列的背景顏色。

active-nav-color

 當前／活動嚮導導航器和相應進度條的背景顏色

visited-nav-color

已瀏覽的精靈導覽器和對應進度列的背景顏色。

tabs-bifercating-border-color

將邊框顏色分叉的容器分成導覽器和面板

tabs-navigator-separator-color

左側標籤的底部邊框顏色分隔標籤（標籤導覽器）。

tabs-child-nav-bg-color

導覽器巢狀／子/子導覽器的背景顏色

本頁內容