1. 分組組件介紹

1.1 什么是分組

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

效果如圖：

分組組件

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

1.2 使用場(chǎng)景

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

2. 屬性

2.1 顯示頭部

關(guān)閉開(kāi)關(guān)則用戶(hù)配置頭部的設(shè)置選項(xiàng)均自動(dòng)收起

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

顯示頭部

隱藏頭部

2.1.1 分組標(biāo)題

顯示此分組的名稱(chēng)，字?jǐn)?shù)較多時(shí)會(huì)顯示不全，僅顯示前 9 個(gè)漢字

2.1.2 圖標(biāo)

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

設(shè)置圖標(biāo)

2.1.3 用戶(hù)提示

指分組后面加一個(gè)小「i」提示：點(diǎn)擊查看重點(diǎn)說(shuō)明，效果如圖：

提示、注意事項(xiàng)

2.1.4 頭部分割線(xiàn)

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

頭部分割線(xiàn)

2.2 PC 端設(shè)置

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

2.2.1 顯示邊框

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

顯示邊框

2.2.2 外邊距

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

2.2.3 內(nèi)邊距

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

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

2.3 Mobile 端設(shè)置

類(lèi)似于 PC 端設(shè)置，此配置僅對(duì)移動(dòng)端生效，設(shè)置同 PC 端設(shè)置，效果如圖：

3. 樣式

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

樣式配置

3.1 源碼編輯

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

3.2 狀態(tài)

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

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

• focus：頁(yè)面元素處于光標(biāo)焦點(diǎn)位置
• active: 頁(yè)面元素處于選中激活狀態(tài)

注：

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

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

3.3 顯示

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

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

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

以上4種均為標(biāo)準(zhǔn)前端 CSS 布局模型，這里不做展開(kāi)介紹，有需要的話(huà)，可以參考 w3c對(duì)應(yīng)文檔

舉例，flex 比較常用的是

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

3.4 Margin 及 Padding

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

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

3.5 文字

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

3.6 背景

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

3.7 邊框

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

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

3.8 陰影

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

3.9 不透明度

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

3.10 鼠標(biāo)手勢(shì)

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