Quasar 框架：将 QToolbarTitle 隐藏在 QLayoutHeader/QToolbar 中

Question

我正在尝试使用 Quasar Framework 构建应用程序。

我想在位于 QLayoutHeader 内的 QToolbar 中有 2 个 QRouteTab。我有这个代码：

<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header>
      <q-toolbar color="primary" :inverted="$q.theme === 'ios'">
        <q-tabs>
          <div class="row">
            <q-route-tab default="true" to="/" label="Найду еду"/>
            <q-route-tab to="/contacts" label="Контакты"/>
          </div>
        </q-tabs>
      </q-toolbar>
    </q-layout-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

这是我得到的：

如您所见，QTabs 上方有一个空的 space。我想摆脱它。我该怎么做？

Answer 1

我在浏览器中查看了页面代码并提出了解决方案：

<style>
  .q-tabs-head {
    display: none;
  }
</style>

Answer 2

做你想做的正确方法是删除周围的 div 并将 slot="title" 添加到 q-route-tab 元素。这会将标签贴在正确的位置。

<q-tabs>
  <q-route-tab slot="title" default="true" to="/" label="Найду еду"></q-route-tab>
  <q-route-tab slot="title" to="/contacts" label="Контакты"></q-route-tab>
</q-tabs>

Codepen

Quasar 框架：将 QToolbarTitle 隐藏在 QLayoutHeader/QToolbar 中

Quasar Framework: hide QToolbarTitle inside QLayoutHeader/QToolbar

quasar-framework