Page 页面构造

---

fox-page

布局组件，用于页面构造,能够根据 设备的宽高自动设置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>

API

Props

组件支持以下属性：

参数	类型	说明
disabled	Boolean	是否禁用(全局)
readonly	Boolean	是否禁用(全局)

Slots

支持以下插槽：

名称	说明
default	自定义内容

fox-header-bar

用于page中头部分

HTML

<fox-header-bar></fox-header-bar>

API

Slots

支持以下插槽：

名称	说明
default	自定义内容

fox-content

用于page中内容体部分

HTML

<fox-content></fox-content>

API

Slots

支持以下插槽：

名称	说明
default	自定义内容

fox-footer-bar

用于page中底部

HTML

<fox-footer-bar></fox-footer-bar>

API

Slots

支持以下插槽：

名称	说明
default	自定义内容

fox-group

用于page中头部分

HTML

<fox-group></fox-group>

API

Props

组件支持以下属性：

参数	类型	说明
disabled	Boolean	是否禁用(全局)
readonly	Boolean	是否禁用(全局)
filter-models	Array	可读/禁用不处理model集合(全局)
ignore-events	Object	忽略事件集合(全局)
column	Number	列数
name	String	组名
no	String	序号(如果不设置group header不显示)
title	String	标题(如果不设置group header不显示)
title-width	String	标题宽度
color	String	标题颜色
label-width	String	group item label宽度
label-position	String	group lebel位置(left,right,top)

no和name其中一个不设置，那么group的header将不会显示

Slots

支持以下插槽：

名称	说明
default	item内容