# Page

页面相关组件

## 代码演示

<CodePreview src="/doc-comp/page" :height="900">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper contentFullHeight title="页容器组件">
    <template #headerContent>头部内容</template>
    <template #backIcon>left</template>
    <template #extra>
      <a-button key="3">Operation</a-button>
      <a-button key="2">Operation</a-button>
      <a-button key="1" type="primary">Primary</a-button>
    </template>
    <template #footer>
      PageHeader 的页脚，一般用于渲染 TabBar
      <a-tabs>
        <a-tab-pane key="1" tab="Details" />
        <a-tab-pane key="2" tab="Rule" />
      </a-tabs>
    </template>
    <template #subTitle> 自定义的二级标题文字</template>
    <template #tags> <a-tag color="blue">Running</a-tag></template>

    <template #leftFooter>leftFooter</template>
    <template #rightFooter>rightFooter</template>
    默认内容
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@eciol/ant-ui';
</script>

```
</details>
</CodePreview>

## PageWrapper

用于包裹页面组件

### Usage

```vue
<template>
  <PageWrapper>
    <template #headerContent>头部</template>
    <template #leftFooter>left</template>
    <template #rightFooter>right</template>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
</script>
```

### Props

| 属性              | 类型               | 默认值 | 说明                            |
| ----------------- | ------------------ | ------ | ------------------------------- |
| title             | `string`           | -      | pageHeader title                |
| dense             | `是否缩小主体区域` | false  | 为 true 将会取消 padding/margin |
| headerDense       | `是否缩小头部区域` | false  | 为 true 将会取消 padding/margin |
| headerSticky      | `头部区域是否粘性布局` | false  | 为 true 将会头部区域不随页面滚动 |
| content           | `string`           | -      | pageHeader Content 内容         |
| contentStyle      | `object`           | -      | 主体区域样式                    |
| contentClass      | `string`           | -      | 主体区域 class                  |
| contentBackground | `boolean`          | -      | 主体区域背景                    |
| contentFullHeight | `boolean`          | false  | 主体区域是否占满整个屏幕高度    |
| fixedHeight       | `boolean`          | false  | 固定主体区域高度                |

### Slots

**pageHeader 的 slot 都支持**

| 名称          | 说明                |
| ------------- | ------------------- |
| leftFooter    | PageFooter 左侧区域 |
| rightFooter   | PageFooter 右侧区域 |
| headerContent | pageHeader 主体内容 |
| default       | 主体区域            |

## PageFooter

用于页面底部工具栏

### 使用

```vue
<template>
  <div>
    <PageFooter>
      <template #left>left</template>
      <template #right>right</template>
    </PageFooter>
  </div>
</template>
<script setup lang="ts">
  import { PageFooter } from '@eciol/ant-ui';
</script>
```

### Slots

| 名称  | 说明     |
| ----- | -------- |
| left  | 左侧区域 |
| right | 右侧区域 |