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

Question

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

我想在QRouteTab内的QToolbar中有2个QLayoutHeader。我有以下代码：

<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上方有一个空白区域。我想摆脱它。我该怎么办？

Answer 1

The proper way to do what you want is to remove the surrounding div and add slot="title" to the q-route-tab element. This will stick the tab in the right place.

<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

Answer 2

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

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