布局(Layout)

布局是包装页面内容的元素，如导航栏或侧滑菜单。 多个页面可以共享相同的布局，因此代码是可重用的，这是他们的关键之一。

Quasar布局不是强制性的，但它们确实帮助您更好地构建您的网站/应用程序。 他们有许多功能，可以为您简化应用程序的布局设计提供很大优势，并且直接开箱即用。

安装

编辑/quasar.conf.js来嵌入组件（只添加你需要的东西）：

framework: {
  components: [
    'QLayout',
    'QPageContainer',
    'QPage',
    'QLayoutHeader',
    'QLayoutFooter',
    'QLayoutDrawer',
    'QPageSticky'
  ]
}

基本用法

下面是布局的脚手架，以便您了解结构。 我们稍后会讨论属性

<!-- 主要包裹组件 -->
<q-layout>

  <!-- 可选 -->
  <q-layout-header>
    <!-- 任何内容 -->
  </q-layout-header>

  <!-- 可选 -->
  <q-layout-drawer side="left">
    <!-- 任何内容 -->
  </q-layout-drawer>

  <!-- 可选 -->
  <q-layout-drawer side="right">
    <!-- 任何内容 -->
  </q-layout-drawer>

  <!-- 必需的 -->
  <q-page-container>

    <!--
      这里是Vue Router注入
      子页面组件的地方

      下面的<router-view />标签可以替换成一个
      实际的网页内容，你应该这样做。
    -->
    <router-view />
    <!--
      QPageContainer的第一个子无素必须是QPage，
      所以请确保您的布局路由子组件
      封装一个QPage。
    -->

  </q-page-container>

  <!-- 可选  -->
  <q-layout-footer>
    <!-- 任何内容 -->
  </q-layout-footer>
</q-layout>

下面是布局的另一个例子，其中包含一些有用的元素：

<q-layout view="hHr LpR lFf">
  <!-- 页眉 -->
  <q-layout-header>
    <!-- 页眉的第一行是一个QToolbar -->
    <q-toolbar>
      <!-- showLeft是附加到下面的左侧侧滑面板的模型-->
      <q-btn
        flat round dense
        @click="showLeft = !showLeft"
        icon="menu"
      />

      <q-toolbar-title>
        Layout Header
        <span slot="subtitle">Optional subtitle</span>
      </q-toolbar-title>

      <!-- showRight是附加到下面的右侧侧滑面板的模型 -->
      <q-btn
        flat round dense
        @click="showRight = !showRight"
        icon="menu"
      />
    </q-toolbar>

    <!-- 页眉第二行是QTabs -->
    <q-tabs>
      <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
      <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
      <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
      <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
    </q-tabs>
  </q-layout-header>

  <!-- 左侧侧滑面板 -->
  <q-layout-drawer side="left" v-model="showLeft">
    <q-list no-border link inset-separator>
      <q-list-header>Essential Links</q-list-header>
      <q-item to="/docs">
        <q-item-side icon="school" />
        <q-item-main label="Docs" sublabel="quasar-framework.org" />
      </q-item>
      <q-item to="/forum">
        <q-item-side icon="record_voice_over" />
        <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
      </q-item>
      <q-item to="/chat">
        <q-item-side icon="chat" />
        <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
      </q-item>
      <q-item to="/twitter">
        <q-item-side icon="rss feed" />
        <q-item-main label="Twitter" sublabel="@quasarframework" />
      </q-item>
    </q-list>
  </q-layout-drawer>

  <!-- 右侧侧滑面板 -->
  <q-layout-drawer side="right" v-model="showRight">
    Right Side of Layout
  </q-layout-drawer>

  <!-- 子路由在这里注入: -->
  <q-page-container>
    <router-view />
  </q-page-container>

  <!-- 页脚 -->
  <q-layout-footer>
    <q-toolbar-title>
      Layout Footer
    </q-toolbar-title>
  </q-layout-footer>
</q-layout>

如果您想控制滚动条（但不是强制性的），您还可以在布局的左侧或右侧使用QScrollArea：

<!-- 注意style标签 -->
<q-layout-drawer side="left">
  <q-scroll-area class="fit">
    <q-item to="/test-layout/toolbar">Toolbar</q-item>
    <q-item to="/test-layout/tabs">Tabs</q-item>
    <q-item to="/test-layout/drawer">Drawer</q-item>
  </q-scroll-area>
</q-layout-drawer>

了解QLayout的提示

使用magin CSS将打破布局
QLayout依赖于占用整个屏幕，然后由它来管理QPageContainer、QLayoutHeader、QLayoutFooter和QLayoutDrawer的位置（通过view属性）。 你不能在QLayout本身或上面提到的任何组件上使用CSS margin作为样式。 然而可以安全地使用CSS padding。

路由

如果您的布局使用Vue路由的子路由（推荐），那么使用Vue的<router-view />组件是有意义的，该组件只是注入子路径的占位符。

工具栏放置

使用Toolbars组件的好地方就在QLayoutHeader和QLayoutFooter中。

<q-layout-header>
  <q-toolbar color="green">
    ... toolbar content ...
  </q-toolbar>
</q-layout-header>

搜索示例

以下是在页眉中放置Search栏的示例：

<q-layout>
  ...
  <!-- 我们把它放在页眉上 -->
  <q-layout-header>
    <q-toolbar color="primary">
      <q-search inverted v-model="search" color="none" />
    </q-toolbar>
  </q-layout-header>
  ...
</q-layout>

固定定位和FAB

另外，请阅读智能的页面粘贴，它可以帮助您修复布局页面上DOM元素或组件的位置，并了解如何使用它来放置浮动操作按钮。

QLayout Vue属性

Vue属性 类型 说明
view 字符串 配置字符串，用于定义布局的不同部分如何显示在屏幕上。

配置“view”属性

Quasar引入了独特而优秀的布局概念，通过简单地更改字符串短符号，您可以轻松地以特定方式构造布局。

为了解释这是如何工作的，想象你的布局是一个3x3的容器矩阵。第一行容器是页眉，最后一行是页脚。第一列容器是“左”，最后一列是“右”。矩阵的中心，在页眉下方和页脚上方，将成为页面或主要内容容器。

现在想想这个。容器矩阵或“QLayout View”可以用字符串表示。该字符串只包含11个字符：

下图提供了QLayout View的可视化表示，以帮助您了解如何配置其3x3矩阵。

Layout "view" prop

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

例如，如果要将布局的右侧侧滑菜单放在页眉、页面和页脚的右侧，则可以使用hhr lpr ffr。如果你想修改它，只需要将一个’r’字符转换为大写字母，如：hhR lpr ffr或hhr lpR ffr或hhr lpr ffR。

这些设置完全取决于您如何使用。你甚至可以用这样疯狂的设置：Lhh lpR ffr。试试看！确保你也进入桌面视图，看它是否正常工作。

注意
指定布局的所有部分很重要, 即使不使用它们。例如，即使您不使用页脚或右侧侧滑菜单，也可以在布局的“view”属性中指定它们。

QLayout Vue事件

事件名称 说明
@resize 窗口改变大小触发的事件。
@scroll 页面滚动时触发的事件。
@scrollHeight 页面滚动高度变化时触发的事件。
其他辅助类 集成布局与路由器