Quasar Framework: скрыть QToolbarTitle внутри QLayoutHeader/QToolbar

Question

Я пытаюсь создать приложение с помощью Quasar Framework.

Я хочу иметь 2 QRouteTab в QToolbar который находится внутри 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>

Вот что я получаю:

ht tps://stackru.com/images/7bac9c75e8c8a701a103153e25de114896a70060.png

Как видите, над QTabs, Я хочу избавиться от этого. Как я могу это сделать?

Answer 1

Правильный способ сделать то, что вы хотите, это удалить окружающий 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

Answer 2

Я посмотрел код страницы в браузере и нашел решение:

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