MdPage fox-page

• 示例
  • 基本用法
• API
  • Props/Attrs
  • Slots

Layout

布局组件，用于页面构造,能够根据 设备的宽高自动设置width和height 通过fox-page、fox-header-bar、fox-content、fox-group和fox-footer-bar构造一个页面结构，其中fox-page和fox-content是否必须的，fox-group根据内容需要构建，而fox-header-bar和fox-footer-bar根据需要采用。

示例

基本用法

层次结构：

fox-page
--fox-header-bar
--fox-footer-bar
--fox-content
--fox-group +

HTML

 <!--page每个页面的root元素-->
<fox-page group-header-width="120px">
  <!--header bar-->
  <fox-header-bar></fox-header-bar>
  <!--footer bar必须在fox-content的上面-->
  <fox-footer-bar align="right">  <!--align的值有left、center、right 默认为right-->
    <fox-button type="primary" size="small" round>提交</fox-button>
    <fox-button type="success" size="small" round>取消</fox-button>
    </fox-footer-bar>
    <!--page内容区域-->
    <fox-content>
      <fox-group no="1" title="四列+跨列" class="my-group" label-width="80px" column="2" style="width:100%">
        <!--分组内容-->
      </fox-group>
    </fox-content>
</fox-page>

<md-page disabled="true" readonly="true"></md-page>

API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | disabled | Boolean | | false | 是否禁用(全局) | | readonly | Boolean | | false | 是否禁用(全局) |

Slots

(default)

插入文本或 HTML。