布局

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

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

安装

在下面的卡中,我们正在安装与QLayout相关的所有Quasar组件,但是您应该只选择使用此列表中的内容。 仅需要QLayout。

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

布局生成器

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

WARNING

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

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

TIP

请密切注意开发人员控制台的便捷帮助程序, 在它上面有正在使用但未在quasar.conf.js文件中声明的组件。

Layout Builder

用法

使用margin CSS会破坏布局

QLayout依赖于占据整个屏幕,因此QPageContainer、QHeader、QFooter和QLayoutDrawer位置由它管理(通过view属性)。 您在CSS本身或上面提到的任何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:

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

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

Layout Builder

WARNING

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

容器化QLayout

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

WARNING

IE11不支持。

WARNING

请注意,它需要显式设置CSS高度(或最小高度),否则不起作用。

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

Containerized QLayout
In a QDialog

QLayout API

Loading API...
Please wait...