API 浏览器
QPageSticky 布局

QPageSticky 组件有助于放置其封装的 DOM 元素/组件无论用户滚动到哪里,它都会移动到 QPage 内容区域内的静态位置。

¥The QPageSticky component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls.

此方法的一大优势在于,即使布局中的页眉、页脚或抽屉未配置为固定布局,该组件包裹的元素也永远不会与这些元素重叠。在后一种情况下,位置将会偏移,以避免发生重叠。例如,尝试使用非固定页脚。当用户到达屏幕底部并出现页脚时,组件将向上移动,以免与页脚重叠。

¥The great advantage of this is that the elements wrapped by this component will never overlap the layout header, footer or drawer(s), even if those are not configured to be fixed. In the latter case, the position will be offset so that the overlap won’t occur. Try it out with a non-fixed footer for example. When user reaches bottom of screen and footer comes into view, the component will shift up so it won’t overlap with the footer.

Loading QPageSticky API...

用法(Usage)

¥Usage

提示

由于 QPageSticky 需要布局,而 QLayout 默认管理整个窗口,因此出于演示目的,我们将使用容器化的 QLayout。但请记住,你无需为 QPageSticky 使用容器化的 QLayout。

¥Since QPageSticky needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QPageSticky.

警告

  • 为了使 QPageSticky 正常工作,必须将其放置在 QLayout 组件中。

    ¥In order for QPageSticky to work, it must be placed within a QLayout component.

  • QPageSticky 必须是其父元素中的最后一个子元素,因此它可以显示在其他内容之上。

    ¥QPageSticky must be the last child element within its parent, so it can display on top of other content

基本(Basic)

¥Basic

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

¥In the example below, click on the menu buttons to show/hide Drawers, scroll the inner page, and resize the browser window so that the enclosing QLayout hits the Drawer’s 700px and 500px breakpoints.

Basic



已扩展(Expanded)

¥Expanded

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

¥In the example below, click on the menu buttons to show/hide Drawers, scroll the inner page, and resize the browser window so that the enclosing QLayout hits the Drawer’s 700px and 500px breakpoints.

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

¥By using expanded QPageSticky you can, for example, have a page-specific QToolbar as below.

Expanded