工具栏(Toolbar)

Quasar布局可以包含页眉和页脚（也称为“页边距”），这是使用工具栏的好地方，但请注意，您也可以将工具栏放在任何您想要的地方。 一个QToolbar会在您的边缘呈现一行，通常用于导航按钮和标题（但不仅限于此）。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QToolbar',
    'QToolbarTitle'
  ]
}

基本用法

<q-toolbar color="primary">
  <!--
    对于工具栏标题，我们使用
    QToolbarTitle组件
  -->
  <q-toolbar-title>
    Title
  </q-toolbar-title>

  <!--
    在工具栏中，按钮最好
    配置为“flat, round, dense”并带有图标，
    但任何按钮都可以
  -->
  <q-btn flat round dense icon="mail" />
</q-toolbar>

<!-- 一种颜色“倒置”工具栏 -->
<q-toolbar color="primary" inverted>
  ...
</q-toolbar>

<!-- 一种颜色“倒置”工具栏, 使用自定义文本颜色 -->
<q-toolbar color="amber" text-color="dark" inverted>
  ...
</q-toolbar>

<!-- 带标题和副标题的工具栏 -->
<q-toolbar color="primary" inverted>
  <q-toolbar-title>
    Title
    <span slot="subtitle">
      Subtitle
    </span>
  </q-toolbar-title>
</q-toolbar>

<!-- 一个工具栏，具有浅色和重写的文本颜色 -->
<q-toolbar color="amber" text-color="black">...</q-toolbar>

…

在布局页眉上使用工具栏的示例：

<q-layout>
  ...
  <q-layout-header>
    <q-toolbar color="secondary">
      <!--
        切换QLayout左侧
        （假设侧滑菜单有一个绑定到“leftSide”的数据模型）
      -->
      <q-btn
        flat round dense
        icon="menu"
        @click="leftSide = !leftSide"
      />

      <q-toolbar-title>
        Title
      </q-toolbar-title>

      <q-btn flat round dense icon="mail" />
      <q-btn flat round dense icon="alarm" />
    </q-toolbar>
  </q-layout-header>
  ...
</q-layout>

QToolbar Vue属性

属性 类型 说明
color 字符串 来自Quasar调色板的颜色
text-color 字符串 一个来自Quasar调色板用来覆盖文本的颜色
inverted 布尔 反转颜色：背景变为透明，而文字具有color
glossy 布尔 应用光泽效果
shrink 布尔 查看缩小章节

QToolbarTitle

QToolbarTitle是一个组件，用于包裹工具栏的“标题”。 它横向扩展到可以获得的完整的页面空间。 如果没有足够的空间来覆盖内容的全部范围，则使用省略号结束符。

<!-- 带标题和副标题的工具栏 -->
<q-toolbar color="primary" inverted>
  ...
  <q-toolbar-title>
    Title
    <span slot="subtitle">
      Subtitle
    </span>
  </q-toolbar-title>
</q-toolbar>

缩小

默认情况下，QToolbarTitle设置为增长到可用空间。 但是，您可以使用shrink布尔属性来更改它：

<q-toolbar-title shrink>
  Title
</q-toolbar-title>

下拉按钮 选项卡