質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

0回答

2166閲覧

Vuetifyのタブ(コンテンツ付き)を最小のwidthにするには

noricoonco

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/07/17 09:28

Vuetifyでコンテンツつきタブを使用しています。

<template> <v-card> <v-tabs v-model="tab" :tab="tab"> <v-tab v-for="item in tabItems" :key="item.tab" :tab="tab"> {{ item.tab }} </v-tab> </v-tabs> <v-tabs-items v-model="tab"> <v-tab-item v-for="item in tabItems" :key="item.tab"> <slot :name="item.content">{{ item.content }}</slot> </v-tab-item> </v-tabs-items> </v-card> </template>

上のソースではタブに合わせてスロットでコンテンツを挿入できるようにしています。
コンテンツは画面いっぱいに広げたいのですが、
タブは要素のみの幅に設定したいと考えています。

そのためには、v-cardを外す必要があると考えたのですが
v-cardタグを外すとv-tabs-itemsがエラーになり外すことができません。

質問1)v-cardをつけないとコンテンツ付きタブは実装できないのでしょうか
質問2)v-cardは特に問題なく、タブの幅のmax-widthを外すことができるのでしょうか

拙い説明となって恐縮ですが何卒ご鞭撻のほどよろしくお願いいたします。

レイアウトイメージ図↓
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rubytomato

2020/07/17 10:21

3点ほどご確認頂きたいのですが、 1) お使いのVuetify.jsのバージョンを質問に追記ください。version 1.5とversion 2.xではコードの書き方に違いがあります。 2) 添付して頂いているレイアウトイメージ図の左側(タブが画面いっぱいになってしまうx)は、タブが4つあって4番目のタブが画面いっぱいに表示されてしまう、という現象を表しているのでしょうか? 3) 質問に記載のコードを動かして頂いて、実際のタブの表示のされ方をスクリーンショットして、質問に貼付して頂くことは可能でしょうか? そうして頂くと状況をより把握できると思います。
noricoonco

2020/07/27 02:18

ありがとうございます。 1)version 2.x 2)いえ、タブは3つで伸びているのはタブではない背景?ゾーンです 3)申し訳ありません、今すぐでは無理なので書き直して見せられる状態に次第貼らせていただきます。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問