vuetify v-spacerが機能しない。

Question

前提・実現したいこと

vuetifyを用いて１枚目の画像のような物を作成したいです。

(https://vuetifyjs.com/ja/components/toolbars/)
サイトから該当箇所のコードを持ってきて自分で実行してみましたが、２枚目の画像のようになってしまい、うまくレイアウトされていません。

v-spacerがうまく機能していないように感じます。

該当のソースコード

<template>
  <v-app>
    <v-toolbar extended>
      <v-toolbar-content>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>test</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn>testa</v-btn>
        <v-btn>testb</v-btn>
        <v-btn>testc</v-btn>
      </v-toolbar-content>
      <v-toolbar-extension>
        <v-toolbar-items>
          <v-btn>testd</v-btn>
          <v-btn>teste</v-btn>
          <v-btn>testf</v-btn>
        </v-toolbar-items>
      </v-toolbar-extension>
    </v-toolbar>
  </v-app>
</template>

試したこと

vueとvuetifyの更新。
v-spacerが機能していないように感じたので検索してみましたが、解決することができませんでした。

その他必要な応報がありましたら補足いたします。

よろしくお願いします。

Answer 1

こんな感じでしょうか。

<v-app>
  <v-card>
    <v-toolbar class="yellow" extended>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>test</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>testa</v-btn>
      <v-btn text>testb</v-btn>
      <v-btn text>testc</v-btn>
      <template v-slot:extension>
        <v-btn text>testd</v-btn>
        <v-btn text>teste</v-btn>
        <v-btn text>testf</v-btn>
      </template>
    </v-toolbar>
  </v-card>
</v-app>

https://codepen.io/nulltemp/pen/oNXMpMX

v-spacerの問題ではなく、HTML構造の問題のようです。
v-toolbar-contentとv-toolbar-extensionというタグはちょっと存在するかどうか分からなかったので削除しています。また、extendedは「「extension」スロットを使用してツールバーの高さを増加」とあるので新しくスロットの値を追加しています。
Vueのスロットについては人に説明できるほど詳しくないので、以下を参照してください。

https://jp.vuejs.org/v2/guide/components-slots.html#%E5%90%8D%E5%89%8D%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88

Comments

[TakeruIto]

なるほど。
slotが必要だったんですね。
こんなわかりにくい質問に答えていただきありがとうございました。
よく読んでみます。