布局( Layout )可視為一個容器。該容器內(nèi)部可劃分五個區(qū)域:北區(qū)( North ) 、南區(qū)( South ) 、東區(qū)( East ) 、西區(qū)( West )和中區(qū)( Center )。
布局( Layout )中區(qū)( Center )是必需區(qū)塊,北區(qū)( North ) 、南區(qū)( South ) 、東區(qū)( East ) 、西區(qū)( West )是可選區(qū)塊。
布局( Layout )可以嵌套,因此您可以憑個人意愿構(gòu)建復雜多變的布局。
屬性列表
名稱 |
數(shù)據(jù)類型 |
作用描述 |
默認值 |
layaotCls |
string |
布局樣式類。 |
null |
layaotStyle |
Object |
布局內(nèi)聯(lián)樣式。 |
null |
字段列表
名稱 |
類型 |
作用描述 |
panels |
QueryList<LayoutPanelComponent> |
所有布局面板。 |
方法列表
名稱 |
參數(shù) |
返回值 |
作用描述 |
getPanel |
region:string |
LayoutPanelComponent |
獲取區(qū)域面板組件。 |
注:
- 繼承: None 。
- 選擇器: eui-layout 。
使用方法
<eui-layout style="width:700px;height:250px;">
<eui-layout-panel region="north" style="height:50px;">
<div class="title">North Region</div>
</eui-layout-panel>
<eui-layout-panel region="south" style="height:50px;">
<div class="title">South Region</div>
</eui-layout-panel>
<eui-layout-panel region="west" style="width:120px;">
<div class="title">West Region</div>
</eui-layout-panel>
<eui-layout-panel region="east" style="width:120px;">
<div class="title">East Region</div>
</eui-layout-panel>
<eui-layout-panel region="center" style="height:100%">
<div class="title">Center Region</div>
</eui-layout-panel>
</eui-layout>
更多建議: