一般功能-收合容器/切換

直接將此元件拖拉至畫布上欲插入收合容器的位置。 #

插入元件-收合容器:

畫布上呈現插入收合容器元件畫面。

點選收合容器段(螢光處)可編輯「段」佈局、樣式、進階功能。

將游標移到收合容器欄內點選,或於右上角編輯收合容器符號,點選進入編輯收合容器。

點選編輯收合容器。

編輯收合容器–內容 #

點選編輯收合容器後,顯示編輯收合容器,一樣包含內容、樣式、進階。
編輯項目方式與其他項目元件大致相同;圖示的部分亦與圖示列表大致相同。

編輯收合容器-內容版面。

編輯收合容器-內容,點選收合容器#數字(#1、#2),可變更收合容器標題及收合容器的內容。

若針對已經編輯完的收合容器,按下「複製收合容器」,則編輯完的收合容器將被完全複製(包含文本及樣式設定);

「+新增項目」則為新增一個新的收合容器項目,且未有任何樣式。

編輯收合容器-內容說明。

範例將編輯收合容器-內容中收合容器項目,變更標題輸入為隱私權政策等。

範例變更收合容器標題。

透過選擇Icon Library或上傳檔案來插入Icon圖示。

圖示與活躍的圖示差異為:圖示於畫布上收合容器標題左或右呈現的圖示;活躍的圖示,為當游標點擊收合容器項目時,畫布上的圖示將變更。

紅圈(1):不呈現圖示。在圖示列點選此按鈕,則此標題前後不呈現圖示;若在活耀的圖示列點選此按鈕,則為當游標點擊收合容器項目時,不呈現圖示。

紅圈(2):自行上傳圖示。

紅圈(3):呈現或變更所選內建Icon Library圖示。在圖示列點選圖示,則於畫布上標題左或右呈現此圖示;若於活耀的圖示列,點選不同圖示,則當游標點擊收合容器項目時,呈現所選圖示。

編輯收合容器-內容圖示版面。

點選Icon Library(紅圈3),選擇Icon後按下插入(INSERT)。
範例將透過ICON LIBRARY變更圖示與活躍圖示。

點選進入ICON LIBRARY ,選擇圖示,並插入。
範例變更圖示及不顯示活耀的圖示。

畫布上收合容器,依照上述變更標題並選擇圖示列圖示以及不呈現活耀圖示。
範例中個人資料保留期限前顯示圖示,點擊開啟隱私權政策,標題項目前並無呈現圖示。

編輯收合容器–樣式 #

編輯收合容器-樣式,分為收合容器、標題、圖示、內容四個下拉選單。

收合容器,為調整收合容器元件的框線,邊線寬度可以設定邊線的粗細並可調整邊線的顏色。

標題,為畫布上收合容器的標題(隱私權政策/個人資料保留期限),可以調整標題背景(不含描述內容背景)、文本顏色以及點選標題時(隱私權政策/個人資料保留期限)動作顏色以及文本尺寸,標題與邊線之間的距離。

圖示,為調整圖示的顏色、點擊收合容器時圖示動作顏色及與標題間的距離以及圖示顯示於標題左或右側位置。

內容,為畫布上收合容器標題的描述內容 ,可以調整描述內容背景(不含標題的背景)、文本顏色、文本尺寸,內容與邊線之間的距離。

範例將標題的背景調整為黑色,標題文本顏色為白色,排版設定文本尺寸16PX,重400,字元間距1。

範例亦將圖示置右對齊,圖示顏色設為白色。

範例再將內容的排版設定文本尺寸14PX,重300,字元間距1。

範例依照設定於畫布上顯示黑色標題背景與白色文本及圖示,而當游標點選畫布上隱私權政策時則因將活躍圖示設不顯示而不呈現於標題右側。

畫布上收合容器,依照上述設定呈現變更。

直接將此元件拖拉至畫布上欲插入切換的位置。 #

插入元件-切換:

將切換元件拖拉至畫布上欲插入的位置,切換元件編輯設定方式與收合容器幾乎相同。僅於預設項目名稱(收合容器/切換)的差別,可以依照設計需求自行選擇元件使用。

此為於畫布上插入切換元件的畫面。

編輯切換–內容 #

編輯切換-內容與編輯收合容器設定方式相同。

編輯切換-內容版面。

編輯切換-內容,點選切換#數字(#1、#2),可變更切換標題及切換內容。

編輯切換-內容說明。

透過選擇Icon Library或上傳檔案來插入Icon圖示。

圖示與活躍的圖示差異為:圖示於畫布上切換標題左或右呈現的圖示;活躍的圖示,為當游標點擊切換項目時,畫布上的圖示將變更。

紅圈(1):不呈現圖示。在圖示列點選此按鈕,則此標題左或右不呈現圖示;若在活耀的圖示列點選此按鈕,則為當游標點擊切換項目時,不呈現圖示。

紅圈(2):自行上傳圖示。

紅圈(3):選擇內建Icon Library圖示。在圖示列點選圖示,則於畫布上標題左或右呈現此圖示;若於活耀的圖示列,點選不同圖示,則當游標點擊標題項目時,呈現所選圖示。

編輯切換-內容圖示版面。

編輯切換–樣式 #

編輯切換–樣式,分為切換 、標題、圖示、內容四個下拉選單;與收合容器相同,僅切換項目樣式有部分差異。

切換,為切換元件的框線,可調整邊線的寬度與顏色及兩切換項目之間的距離以及是否設有框線陰影。

標題,為畫布上切換的標題(切換#1/切換#2),可以調整標題背景(不含內容的背景)、文本顏色以及點選標題時(切換#1/切換#2)動作顏色及文本尺寸,及標題與標題之間的距離。

圖示,為調整圖示的顏色、點擊時動作顏色、與標題間的距離以及圖示顯示於標題左側或右側的對齊位置。

內容,為畫布上切換標題的描述內容 ,可以調整描述內容背景(不含標題)、文本顏色、文本尺寸,與內容與標題之間的距離。