Layout Page

我们将讨论在 QLayout 中封装页面。 如果尚未准备好，请先阅读 QLayout 文档页面。

QPageContainer API

QPage API

布局生成器

点击下面的按钮来搭建您的布局。

用法

QPage 必须由 QPageContainer 封装，而 QPageContainer 又必须是 QLayout 的子节点。

<q-layout>
  ...
  <q-page-container>
    <q-page>
      <!-- 页面内容 -->
    </q-page>
  </q-page-container>
  ...
</q-layout>

通常情况下，QPageContainer 是 Layout 模板的一部分（它只包含一个<router-view/>子元素），其内容进入/src/pages 下的单独 vue 文件中。 如果尚未了解，请阅读[使用布局和页面进行路由]](/layout/routing-with-layouts-and-pages)。

<!-- 布局 vue 文件: -->
<q-layout>
  ...
  <q-page-container>
    <router-view />
  </q-page-container>
  ...
</q-layout>

<!-- 页面 vue 文件: -->
<q-page padding>
  <!-- 页面内容 -->
</q-page>

示例

Style-

QPage 需要 QLayout，因为 QLayout 控制页面的所有偏移量，并根据其 view 属性配置计算页眉/页脚/抽屉使用的空间。默认情况下，您的 QPage 组件上将设置一个 min-height CSS 属性，以确保内容始终填充屏幕，即使内容只有几行也是如此。

如果您想调整甚至删除此属性，可以使用 style-fn 属性来实现：

<template>
  <q-page :style-fn="myTweak">...</q-page>
</template>

<script>
  export default {
    // ...
    methods: {
      myTweak(offset) {
        // "offset" 是一个数字（像素），
        //它表示基于 QLayout "view" 属性配置的
        //屏幕上页眉+页脚的总高度

        // 这实际上是 Quasar 中默认的 style-fn 的功能如下
        return { minHeight: offset ? `calc(100vh - ${offset}px)` : "100vh" };
      },
    },
  };
</script>

Accessibility

v2.25+

QPage renders a real <main> element, so the main landmark of your QLayout comes for free — exactly one per page, as long as you use a single QPage. Do not add a <main> of your own around or inside it, which would leave the page with duplicate main landmarks. QPageContainer is a plain container with no semantics of its own.