<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成，为了方便在 GitHub 和 NPM 上查阅。如需修改，请查看源文件 -->

# MdPage fox-page

- [示例](#示例)
    - [基本用法](#基本用法)
- [API]()
    - [Props/Attrs](#propsattrs)
    - [Slots](#slots)

**Layout**

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

## 示例
### 基本用法

层次结构：

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

```

HTML

```text
 <!--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>
```
 
```html
<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。

