Angular EasyUI 布局

2020-06-24 17:29 更新

布局( Layout )可視為一個(gè)容器。該容器內(nèi)部可劃分五個(gè)區(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è)人意愿構(gòu)建復(fù)雜多變的布局。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
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>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)