分組

1. 分組組件介紹

1.1 什么是分組

分組是一個官方推薦的區(qū)塊管理器，用于將功能相似的模塊，聚集在一個分組中

效果如圖：

分組組件

在分組內(nèi)添加組件

1.2 使用場景

一個頁面中有多個獨立模塊需要展示（例如商店里面的產(chǎn)品、貨架、價格等，一種產(chǎn)品放入一個模塊展示）且每個模塊中有多個表單組件，則可將每個模塊放置進一個分組

2. 屬性

2.1 顯示頭部

關(guān)閉開關(guān)則用戶配置頭部的設(shè)置選項均自動收起

顯示頭部和隱藏頭部，效果如圖：

顯示頭部

隱藏頭部

2.1.1 分組標題

顯示此分組的名稱，字數(shù)較多時會顯示不全，僅顯示前 9 個漢字

2.1.2 圖標

可以給分組設(shè)置圖標，效果如圖：

設(shè)置圖標

2.1.3 用戶提示

指分組后面加一個小「i」提示：點擊查看重點說明，效果如圖：

提示、注意事項

2.1.4 頭部分割線

開關(guān)關(guān)閉，則隱藏頭部分割線，效果如圖：

頭部分割線

2.2 PC 端設(shè)置

指分組組件在表單的頁面布局展示，效果如圖：

2.2.1 顯示邊框

分組組件外圍會有邊框，開啟與關(guān)閉的效果如圖：

顯示邊框

2.2.2 外邊距

分組組件的外圍變寬、變窄，效果如圖：

2.2.3 內(nèi)邊距

分組組件內(nèi)部變寬、變窄，效果如圖：

內(nèi)邊距的開啟與關(guān)閉

2.3 Mobile 端設(shè)置

類似于 PC 端設(shè)置，此配置僅對移動端生效，設(shè)置同 PC 端設(shè)置，效果如圖：

3. 樣式

對于分組的樣式配置，通常直接使用 block 的顯示模型即可

樣式配置

3.1 源碼編輯

即以 CSS 源代碼方式進行樣式編輯，當(dāng)前 div 默認使用 flex 布局；

3.2 狀態(tài)

以傳統(tǒng) PC 端的組件狀態(tài)進行分組設(shè)置：

• 默認：正常狀態(tài)
• hover: 鼠標浮動在組件熱區(qū)，且未產(chǎn)生點擊行為

• focus：頁面元素處于光標焦點位置
• active: 頁面元素處于選中激活狀態(tài)

注：

• 不同的狀態(tài)設(shè)置，默認狀態(tài)會覆蓋其他 3 種狀態(tài)
• 而 hover\focus\active 3 種狀態(tài)的配置則相互隔離，互不影響

• 體現(xiàn)在 CSS 中，是獨立的選擇器設(shè)置

3.3 顯示

對應(yīng) CSS 的 display 模式：

• block：盒子模型
• inline-block：行內(nèi)盒子模型

• inline：行內(nèi)模型
• flex：彈性布局模型

以上4種均為標準前端 CSS 布局模型，這里不做展開介紹，有需要的話，可以參考 w3c對應(yīng)文檔

舉例，flex 比較常用的是

• 使用 flex 布局，按需采用橫向排列、或縱向排列；
• 然后設(shè)置水平 + 垂直 均居中對齊，效果如圖：

3.4 Margin 及 Padding

Margin 指盒子模型中的，距離其他節(jié)點元素的距離；

Padding 指盒子模型中的，距離其內(nèi)部元素的留白距離，效果如圖：

3.5 文字

設(shè)置文字之后，影響的分組里面的組件標題，可自定義，也可直接選擇文字標題，效果如圖：

3.6 背景

可自主選擇系統(tǒng)自帶的顏色，也可使用本地圖片背景上傳，效果如圖：

3.7 邊框

指設(shè)置分組組件的邊框效果；

同時支持設(shè)置圓角大小，圓角指組件的四個角的弧度，效果如圖：

3.8 陰影

設(shè)置組件的陰影投影，通過 x\y 設(shè)置方向，通過 blur 和 spread 設(shè)置陰影

3.9 不透明度

設(shè)置組件模塊的整體透明度效果，范圍 0~100，默認為 100，0 為完全透明

3.10 鼠標手勢

• 選擇 pointer ，則當(dāng)鼠標浮動在區(qū)塊上方時，會出現(xiàn)小手標志
• 選擇 default ，則當(dāng)鼠標浮動在區(qū)塊上方時，會出現(xiàn)箭頭標志