页头和页脚 | Quasar Framework

为什么捐赠

API 浏览器

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Flex 栅格

Vue 组件

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

联系站长

页头和页脚

QLayout 允许您将视图配置为一个 3x3 矩阵，其中可以包含可选的页头和/或页脚（通常用作导航栏，但也可以放置任何内容）。如果您还没有了解过，请先阅读 QLayout 文档。

布局生成器

点击下方按钮来搭建您的布局。

Layout Builder

用法

TIP

由于页头和页脚需要依赖布局组件，而 QLayout 默认管理整个窗口，因此这里的示例使用了容器化的 QLayout 来演示。但请注意，您在实际项目中并不一定需要使用容器化的 QLayout 来搭配 QHeader 或 QFooter。

您可以在页头和页脚的工具栏上使用 glossy 类来添加光泽效果。

各种内容

Reveal 属性

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

iOS 风格

在下面的示例中，您可以为 QTabs 使用带有 ion-ios- 前缀的 Ionicons 图标（v4），可以完美匹配 iOS 的外观风格。

桌面应用风格

如果您正在构建 Electron 应用并隐藏了默认的应用边框，下面的示例会特别有用。

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

1. Introduction

2. QHeader API

3. QFooter API

4. 布局生成器

5. 用法

5.1. 各种内容

5.2. Reveal 属性

5.3. iOS 风格

5.4. 桌面应用风格