API 浏览器
布局页眉和页脚

QLayout 允许你将视图配置为 3x3 矩阵,包含可选的 Header 和/或 Footer(主要用于导航栏,但可以是任何内容)。如果你还没有阅读,请先阅读 QLayout 文档页面。

¥QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer (mostly used for navbar, but can be anything). If you haven’t already, please read QLayout documentation page first.

Loading QHeader API...
Loading QFooter API...

布局构建器(Layout Builder)

¥Layout Builder

点击下方按钮搭建你的布局框架。

¥Scaffold your layout(s) by clicking on the button below.

Layout Builder

用法(Usage)

¥Usage

提示

由于页眉和页脚需要布局,而 QLayout 默认管理整个窗口,因此出于演示目的,我们将使用容器化的 QLayout。但请记住,你绝对不需要为 QHeader 或 QFooter 使用容器化的 QLayout。

¥Since the header and footer 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 QHeader or QFooter.

Basic



你可以在页眉和页脚的工具栏上使用 glossy 类。

¥You can use glossy class on toolbars in header and footer.

Glossy



各种内容(Various content)

¥Various content

Playing with QToolbar



Playing with QBreadcrumb



Playing with QTabs



显示属性(Reveal property)

¥Reveal property

在以下示例中,滚动页面即可查看 QHeader 和 QFooter 的行为。

¥In the example below, scroll the page to see the QHeader and QFooter behavior.

Reveal



iOS 外观和体验(iOS look and feel)

¥iOS look and feel

在下面的示例中,你可以将 Ionicons 图标(v4)与 ion-ios- 前缀结合使用于 QTabs,这将与 iOS 的外观和感觉完美匹配。

¥In the example below, you could use Ionicons icons (v4) with ion-ios- prefix for QTabs, which would perfectly match the iOS look and feel.

iOS-like



桌面应用外观(Desktop app look and feel)

¥Desktop app look and feel

如果你构建的是 Electron 应用并且隐藏了默认应用框架,那么下面的示例尤其有用。

¥The example below is especially useful if you build an Electron app and you hide the default app frame.

Desktop app-like