布局容器

1. 布局容器組件介紹

1.1 什么是布局容器

• 布局：是對已有的可視化組件的位置擺放控制，表示了一種動作；
• 布局容器：是一種有布局能力的容器，可以放入多個組件到布局容器中進(jìn)行展示；

• 對于復(fù)雜場景的布局，我們優(yōu)先推薦宜搭彈性布局，即 flex-layout，也是目前業(yè)界前端的主流 CSS 布局方式；
• 對于更詳細(xì)的 flex 布局介紹，可參見 教程鏈接。

添加布局容器組件

在布局容器內(nèi)添加單獨(dú)的組件

1.2 使用場景

• 當(dāng)頁面位置需要分塊劃分時，比如希望頁面按兩列進(jìn)行展示時
• 當(dāng)頁面需要適配不同屏幕尺寸時

• 當(dāng)頁面的 layout 布局有嵌套，位置相對性，位置決定性時
• 當(dāng)頁面的樣式實(shí)現(xiàn)，需要借助 CSS 等高級布局技術(shù)能力時

2. 屬性

2.1 布局

可以直接選擇系統(tǒng)模板，也可自己自定義配置，效果如圖：

選擇布局方式

2.2 Mobile 端設(shè)置

指的組件的排列方式，效果如圖：

手機(jī)端設(shè)置

3. 樣式

對于布局容器的樣式配置

配置組件樣式

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)浮動在組件熱區(qū)，且未產(chǎn)生點(diǎn)擊行為

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

注：

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

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

3.3 顯示

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

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

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

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

舉例，flex 比較常用的是

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

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è)置圓角大小，圓角指組件的四個角的弧度，效果如圖：

3.8 陰影

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

3.9 不透明度

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

3.10 鼠標(biāo)手勢

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