Vue EasyUI 布局

2020-06-24 11:39 更新

布局( 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)建復(fù)雜多變的布局。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認值
layaotCls string 布局樣式類。 null
layaotStyle Object 布局內(nèi)聯(lián)樣式。 null

方法列表

名稱 參數(shù) 返回值 作用描述
getPanel region layoutPanel 獲取區(qū)域面板組件。

注:
- 繼承: None 。

使用方法

  1. 通過 HTML 標記創(chuàng)建布局( Layout )。

  1. <Layout style="width:700px;height:250px;">
  2. <LayoutPanel region="north" style="height:50px;">
  3. <div class="layout_north">北區(qū)</div>
  4. </LayoutPanel>
  5. <LayoutPanel region="south" style="height:50px;">
  6. <div class="layout_south">南區(qū)</div>
  7. </LayoutPanel>
  8. <LayoutPanel region="west" style="width:120px;">
  9. <div class="layout_west">西區(qū)</div>
  10. </LayoutPanel>
  11. <LayoutPanel region="east" style="width:120px;">
  12. <div class="layout_east">東區(qū)</div>
  13. </LayoutPanel>
  14. <LayoutPanel region="center" style="height:100%">
  15. <div class="layout_center">中區(qū)</div>
  16. </LayoutPanel>
  17. </Layout>

  1. 創(chuàng)建嵌套布局( Layout )。

  1. <Layout style="width:100%;height:100%;">
  2. <LayoutPanel region="north" style="height:50px;">
  3. <div class="layout_north">北區(qū)</div>
  4. </LayoutPanel>
  5. <LayoutPanel region="center" style="height:100%">
  6. <div class="layout_center">
  7. 中區(qū)
  8. <Layout style="width:100%;height:50%;">
  9. <LayoutPanel region="east" style="width:120px;">
  10. <div class="layout_east">嵌套東區(qū)</div>
  11. </LayoutPanel>
  12. <LayoutPanel region="center" style="height:100%">
  13. <div class="layout_center">嵌套中區(qū)</div>
  14. </LayoutPanel>
  15. </Layout>
  16. </div>
  17. </LayoutPanel>
  18. </Layout>

注:
- 邊緣區(qū)域可通過拖拽邊框調(diào)整尺寸,也可以通過點擊折疊觸發(fā)器來折疊面板。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號