布局QPageSticky

QPageSticky组件有助于将由它包裹的DOM元素/组件放置到QPage内容区域中的静态位置,无论用户在哪里滚动。

这样做的最大好处是,即使未配置为固定,此组件包裹的元素也不会与布局页眉、页脚或侧滑菜单重叠。 在后一种情况下,位置将偏移,因此不会发生重叠。 例如,尝试使用非固定页脚。 当用户触及屏幕底部并进入视图时,组件将向上移动,因此它不会与页脚重叠。

安装

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

用法

TIP

由于QPageSticky需要布局,并且默认情况下QLayout管理整个窗口,因此出于演示目的,我们将使用容器化的QLayouts。 但是请记住,您绝不需要将容器化的QLayouts用于QPageSticky。

WARNING

  • 为了使QPageSticky工作,必须将其放置在QLayout组件中。
  • QPageSticky必须是其父级中的最后一个子元素,以便它可以显示在其他内容的顶部

基础

在下面的示例中,单击菜单按钮以显示/隐藏侧滑菜单、滚动内页并调整浏览器窗口的大小,以使封闭的QLayout达到侧滑菜单的700px和500px断点。

Basic

扩展

在下面的示例中,单击菜单按钮以显示/隐藏侧滑菜单、滚动内页并调整浏览器窗口的大小,以使封闭的QLayout达到侧滑菜单的700px和500px断点。

通过使用扩展的QPageSticky,例如,您可以具有特定于页面的QToolbar,如下所示。

Expanded

QPageSticky API

Loading API...
Please wait...