布局

布局和网格
页眉和页脚
布局和网格
抽屉
布局和网格
页面
布局和网格
页面固定
布局和网格
页面滚动条
Vue 组件
Floating Action Button 悬浮按钮

QLayout 是一个用于管理整个窗口并使用导航栏或侧抽屉菜单等元素包装页面内容的组件。 多个页面可以共享同一个 QLayout，因此代码是可重用的，这是它们的关键点之一。

QLayout 不是强制性的，但它确实可以帮助您更好地构建网站/应用程序。 它具有许多开箱即用的功能，可极大的帮助您简化网站/应用的布局设计。

QLayout API

QLayout API
view
: String
说明
定义了布局组件（头部/底部/抽屉）在屏幕上的放置方式；请参考文档示例。
container
: Boolean
说明
将布局容器化，这意味着它改变了默认的展开到整个窗口的行为；在使用 QDialog 时非常有用（但不仅限于此）。

布局生成器

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

WARNING

布局生成器可能会使用在 quasar.conf.js 中尚未启用的组件。

可能需要以下组件 - QLayout、QHeader、QToolbar、QToolbarTitle、QBtn、QAvatar、QTabs、QRouteTab、QDrawer、QPageContainer、QFooter。

TIP

密切关注您的开发人员控制台，以了解哪些组件正在使用，但没有在 quasar.config.js 中启用

布局生成器

用法

使用 margin CSS 会破坏布局

QLayout 依赖于占据整个屏幕，因此 QPageContainer、QHeader、QFooter 和 QLayoutDrawer 的位置由它管理（通过view属性）。上面提到的任何 QLayout 组件上都不能使用 CSS margins 相关的样式。 但是，您可以安全地使用 CSS padding。

TIP

如果您的布局使用 Vue Router 子路由（推荐），则可以使用 Vue 的 <router-view /> 组件，该组件只是注入子路由的占位符。 有关更多信息，请阅读使用布局和页面进行路由。

了解 “view” 属性

Quasar 引入了独特而出色的布局理念，使您可以通过简单地更改字符串符号就可以轻松地构造出指定的布局。

为了解释它是如何工作的，假设您的布局是一个 3x3 的容器矩阵（下面以蓝色表示）。 容器的第一行是页眉，最后一行是页脚。 容器的第一列为“左”，最后一列为“右”。 矩阵的中心即页眉下方和页脚上方，将是页面或主要内容容器。

这个容器矩阵或将其理解为 “QLayout View”，它可以由一个字符串表示，您应该将该字符串提供给 QLayout 的 view 属性，它必须是一个长度为 11 的字符串：

  • 3 个字符定义页眉行
  • 然后一个空格
  • 3 个字符定义中间行
  • 一个空格
  • 然后 3 个字符定义页脚行
Header
l/h
h/H
r/h
l/L
p
r/R
Footer
l/f
f/F
r/f
Left
Right

上面显示的字母也区分大小写。 例如，使用至少一个“L”（大写字母而不是小写字母）将使布局左侧（左侧抽屉菜单）处于固定位置。 同样适用于“H”（页眉），“F”（页脚），最后是“R”（右侧/右侧抽屉菜单）

p
View:
hHh Lpr fFf

例如，如果要将布局的右侧/右侧抽屉菜单放在页眉、页面和页脚的右侧，则可以使用 hhr lpr ffr。 如果您也想将其固定，只需将一个 r 字符转换为大写即可，例如：hhr lpR ffr 或 hhR lpr ffr 或 hhr lpr ffR。

这些设置完全取决于您的使用。您甚至可以使用这样疯狂的设置：lhh LpR ffr。 试试看！

布局生成器

WARNING

  • 重要的是，即使不使用它们，也要指定 QLayout 的所有部分。 例如，即使您不使用页脚或右侧侧滑菜单，也请在 QLayout 的 view 属性中指定它们。
  • 当 QDrawer 设置为覆盖(overlay)模式时，QDrawer 将强制进入固定位置，无论 QLayout 的“view” 属性是否配置为 “l/r” 或 “L/R”。 另外，如果在 iOS 平台上并且 QLayout 已容器化，由于无法克服的平台限制，固定位置也将被强制置于 QDrawer 上。

容器化 QLayout

默认情况下，QLayout 管理整个窗口。 但是，您也可以将 QLayout 用作容器（具有特定的高度和宽度），以将其隔离在页面中的某个位置。

WARNING

请注意，它需要显式设置 CSS 高度（或最小高度），否则不起作用。

在下面的示例中，有一个容器化的 QLayout，每侧都有抽屉菜单（断点在左侧抽屉菜单为 700px，在右侧抽屉菜单为 500px）。 断点不是指窗口宽度，而是指 QLayout 容器的实际宽度。

<template>
  <div class="q-pa-md">
    <q-layout view="lhh LpR lff" container style="height: 500px" class="shadow-2 rounded-borders">
      <q-header reveal class="bg-black">
        <q-toolbar>
          <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu" />
          <q-toolbar-title>Header</q-toolbar-title>
          <q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" />
        </q-toolbar>
      </q-header>

      <q-footer>
        <q-toolbar>
          <q-toolbar-title>Footer</q-toolbar-title>
        </q-toolbar>
      </q-footer>

      <q-drawer
        v-model="drawerLeft"
        :width="200"
        :breakpoint="700"
        bordered
        class="bg-grey-3"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-drawer
        side="right"
        v-model="drawerRight"
        bordered
        :width="200"
        :breakpoint="500"
        class="bg-grey-3"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-page-container>
        <q-page style="padding-top: 60px" class="q-pa-md">
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
          </p>

          <q-page-sticky position="top-left" :offset="[18, 68]">
            <q-btn round color="primary" icon="arrow_back" class="rotate-45" />
          </q-page-sticky>
          <q-page-sticky position="top-right" :offset="[18, 68]">
            <q-btn round color="primary" icon="arrow_upward" class="rotate-45" />
          </q-page-sticky>
          <q-page-sticky position="bottom-left" :offset="[18, 18]">
            <q-btn round color="primary" icon="arrow_forward" class="rotate-135" />
          </q-page-sticky>
          <q-page-sticky position="bottom-right" :offset="[18, 18]">
            <q-btn round color="primary" icon="arrow_forward" class="rotate-45" />
          </q-page-sticky>

          <q-page-sticky position="top" expand class="bg-accent text-white">
            <q-toolbar>
              <q-btn flat round dense icon="map" />
              <q-toolbar-title>Title</q-toolbar-title>
            </q-toolbar>
          </q-page-sticky>
        </q-page>

        <q-page-scroller position="bottom">
          <q-btn fab icon="keyboard_arrow_up" color="red" />
        </q-page-scroller>
      </q-page-container>
    </q-layout>
  </div>
</template>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate? 

<template>
  <div class="q-pa-md">
    <q-btn color="teal" label="Open Dialog" @click="dialog = true" />

    <q-dialog v-model="dialog">
      <q-layout view="lhh LpR lff" container style="height: 500px" class="bg-grey-3">
        <q-header class="bg-black">
          <q-toolbar>
            <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu" />
            <q-toolbar-title>Header</q-toolbar-title>
            <q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" />
          </q-toolbar>
        </q-header>

        <q-drawer
          v-model="drawerLeft"
          :width="200"
          behavior="mobile"
          bordered
        >
          <q-scroll-area class="fit">
            <div class="q-pa-sm">
              <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
            </div>
          </q-scroll-area>
        </q-drawer>

        <q-drawer
          side="right"
          v-model="drawerRight"
          bordered
          :width="200"
          :breakpoint="300"
        >
          <q-scroll-area class="fit">
            <div class="q-pa-sm">
              <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
            </div>
          </q-scroll-area>
        </q-drawer>

        <q-page-container>
          <q-page class="q-pa-md">
            <p v-for="n in 15" :key="n">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
            </p>

            <q-page-sticky position="top-left" :offset="[18, 18]">
              <q-btn round color="primary" icon="arrow_back" class="rotate-45" />
            </q-page-sticky>
            <q-page-sticky position="top-right" :offset="[18, 18]">
              <q-btn round color="primary" icon="arrow_upward" class="rotate-45" />
            </q-page-sticky>
            <q-page-sticky position="bottom-left" :offset="[18, 18]">
              <q-btn round color="primary" icon="arrow_forward" class="rotate-135" />
            </q-page-sticky>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-btn round color="primary" icon="arrow_forward" class="rotate-45" />
            </q-page-sticky>
          </q-page>

          <q-page-scroller position="bottom">
            <q-btn fab icon="keyboard_arrow_up" color="red" />
          </q-page-scroller>
        </q-page-container>
      </q-layout>
    </q-dialog>
  </div>
</template>
查看更多？
Flex 网格
Flex 在线体验
布局和网格
布局、页面和路由
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。