布局页眉和页脚 | Quasar 框架

为什么捐赠

API 资源管理器

如何贡献

选项和助手

样式和标识

布局和网格

Flex 网格

Vue 指令

Quasar 插件

Vue 可组合函数

安全

Quasar CLI (使用 Vite)

Quasar CLI（使用 Webpack）

Icon Genie CLI

应用扩展

Quasar 工具

布局头部和底部

QLayout 允许您将视图配置为 3x3 矩阵，包含可选的头部和/或底部（主要用于导航栏，但可以是任何内容）。如果您还没有，请先阅读 QLayout 文档页面。

布局构建器

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

布局构建器

用法

提示

由于头部和底部需要布局，而 QLayout 默认管理整个窗口，因此出于演示目的，我们将使用容器化的 QLayout。但请记住，您绝不需要使用容器化的 QLayout 来创建 QHeader 或 QFooter。

您可以在头部和底部的工具栏上使用 glossy 类。

各种内容

显示属性

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

iOS 风格

在下面的示例中，您可以使用 Ionicons 图标（v4）并使用 ion-ios- 前缀来创建 QTabs，这将完美匹配 iOS 风格。

桌面应用风格

下面的示例特别适用于您构建 Electron 应用并且您隐藏了默认的应用框架的情况。

发现错误了吗？在浏览器中编辑此页面

1. 简介

2. QHeader API

3. QFooter API

4. 布局构建器

5. 用法

5.1. 各种内容

5.2. 显示属性

5.3. iOS 风格

5.4. 桌面应用风格