調適型表單的樣式建構 styling-constructs-for-adaptive-forms

Adobe 建議使用新式且可擴充的資料擷取核心元件，用來建立新的最適化表單或將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步，可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

先決條件 prerequisites

CSS和LESS架構的相關知識。

可自訂的專案 what-can-be-customized

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

在調適型表單中自訂樣式 customizing-styles-in-adaptive-forms

LESS框架簡化了使用案例，進而能夠在最適化表單中自訂樣式。 此框架可讓您使用一組變數和函式(mixin)來定義樣式。 LESS架構有助於減少套件程式碼的大小，並提高其重複使用性。

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

變更主題 changing-theme

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

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

根據啟動程式，以下幾組CSS屬性會定義網頁的主題：

目前，LESS變數僅針對最適化表單中各種元素的這些屬性而定義。

變更元件樣式 changing-component-style

您可以變更元素的外觀、配置、位置和可見度。 若要完成這項工作，請建立或更新您的自訂.css檔案，以包含本文列出的樣式建構。

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

元件 components

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

容器樣式 container-styling

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

欄位樣式 field-styling

調適型表單包含各種欄位型別。 每個欄位都有唯一的類別名稱，即欄位名稱。 欄位也有常見的類別名稱 guideFieldNode.

欄位包含標籤、Widget、說明說明（完整和簡短說明）以及欄位說明圖示（問號）。

標籤樣式 label-styling

HTML元素 標籤 用於欄位包括類別 左側 或 top 標籤位於頂端還是左側。

標籤的CSS規則是使用 Guidelfiellabel 標籤。 如果您是作者，請覆寫此規則以顯示自訂變更。

Widget樣式 widgets-styling

視其型別而定，Widget也包含類別。 通常Widget包含 guideFieldWidget 類別。 附帶HTML的Widget通常使用標準HTML元素輸入並選取。 樣式會據此來設定。 您無法藉由變更變數來設定自訂Widget的樣式。

Widget樣式限制 limitations-in-widget-styling

焦點、強制和停用欄位的樣式會使用變數加以限制。 不過，您可以覆寫樣式來變更它。 提供使用變數的限制主要是為了控制變數的數量。 如果欄位處於先前討論的任何狀態，因此其外觀會大幅變更，則可放寬限制。

說明說明 help-description

作者可以使用簡短和完整說明元件，在欄位中指定說明內容。 兩個元件都有共同類別 .guideHelpDescription 和另一個類別 .long/ .short，視說明型別而定。 說明內容會包含在段落元素中，以覆寫說明的樣式。 說明說明（長與短）會使用以widgetshelp開頭的變數加以修改，如下表所述：

條款與條件 terms-and-conditions

條款與條件(TnC) ``) widget可讓您指定條款與條件。 您可以使用下表所述的變數來自訂Widget。

按鈕 button

按鈕也是Widget。 不過，它們的樣式與Widget稍有不同。 在調適型表單中，下列任一項構成按鈕：

按鈕的HTML代碼：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

問號 question-mark

對於Widget，當作者在說明內容中新增詳細說明，會顯示問號。 系統會使用bootstrap中提供的預設圖示。 若要使用自訂圖示，您可以自訂啟動程式圖示。

表格 table

您可以使用下列變數來變更表格中標題列和本文列的顏色主題。

檔案附件 file-attachment

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

瀏覽器樣式 navigator-styles

有四種型別的導覽器標籤。 這些標籤包括左側、頂部、精靈和摺疊式功能表。 每個瀏覽器都有不同的類別。

以下是Tab鍵瀏覽器元素的HTML代碼（類似於Bootstrap標籤）：

<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規則變更導覽器的樣式，CSS規則會使用以下方式選取元素 下級 選擇器。 例如，若要將文字裝飾樣式新增至錨點標籤：

頂端的Tab導覽器：

.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;

}

此外，根據標籤導覽器是否有巢狀/子項/子項導覽器，有類別可設定標籤導覽器的樣式（左側和頂部）。

guideNavIcon類別會提供預設圖示，供定位點導覽器（左側和頂部）和精靈導覽器使用。

面板樣式 panel-styling

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

面板節點分為導覽器和內容。 那裡 ``內容沒有獨立的樣式元件。 所描述的變數會套用至導覽器和內容。

最上層的面板(RootPanel)沒有這個類別。

行動樣式 mobile-styling

標題列 header-bar

這些變數會影響在包含面板標題以及下一個和背面導覽器的行動裝置或小熒幕裝置上顯示的標題列。

捲動指示器 scroll-indicator

這些變數會影響捲動指示器，也就是出現在行動裝置或小熒幕裝置上的橘色箭頭。 捲動指示器表示畫面可見部分以外的內容存在。 您可以向下捲動以檢視它。 當您按下內容的結尾時，箭頭會消失。

行動固定工具列配置特定變數 mobile-fixed-toolbar-layout-specific-variables

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

主題特定變數 theme-specific-variable

此 簡單註冊 /etc/clientlibs/fd/af/guidetheme/simpleEnrollment的主題和類別 guide.theme.simpleEnrollment 也會介紹一些變數。 如果要建立主題來增強簡單註冊，您可以使用以下「額外變數：