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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

1回答

158閲覧

Vuetifyを用いて作成した画面にスペースが生じる

naoto2013487

総合スコア2

Vuetify.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2024/03/28 07:31

実現したいこと

  • Vutifyを用いたアプリケーションのモックを作成しています。
  • 左側にサイドメニューが表示され、中央に入力フォームを表示したいと考えています。

前提

HTML、CSSとも本当に初心者で、仕事の関係で最近勉強を開始しました。
Vutifyを用いてアプリケーションのモックを作成する必要があるのですが、想定した表示になりません。
実現したいところにも記載した通り、左側にナビゲーションメニュー、中央に簡単な入力フォームを作成したいと考えています。

発生している問題・エラーメッセージ

下記ソースコードを表示したところ、左側のナビゲーション部分と中央の入力フォームの間にスペースが生じています。
このスペースを埋めて、左詰めで表示させるにはどのようにしたら良いでしょうか。

該当のソースコード

基本的にVutifyの公式サイトにあるソースを利用しています。

<template> <div class="container"> <div class="navigation ma-0 pa-0"> <v-app> <v-navigation-drawer :width="180"> <v-list-item title="Application" subtitle="Application"></v-list-item> <v-divider></v-divider> <v-list-item link title="Application-A"></v-list-item> <v-list-item link title="Application-B"></v-list-item> <v-list-item link title="Application-C"></v-list-item> </v-navigation-drawer> </v-app> </div> <div class="form ma-0 pa-0"> <v-app> <form @submit.prevent="submit"> <v-text-field v-model="name.value.value" :counter="10" :error-messages="name.errorMessage.value" label="Name" ></v-text-field> <v-text-field v-model="phone.value.value" :counter="7" :error-messages="phone.errorMessage.value" label="Phone Number" ></v-text-field> <v-text-field v-model="email.value.value" :error-messages="email.errorMessage.value" label="E-mail" ></v-text-field> <v-select v-model="select.value.value" :error-messages="select.errorMessage.value" :items="items" label="Select" ></v-select> <v-checkbox v-model="checkbox.value.value" :error-messages="checkbox.errorMessage.value" label="Option" type="checkbox" value="1" ></v-checkbox> <v-btn class="me-4" type="submit" > submit </v-btn> <v-btn @click="handleReset"> clear </v-btn> </form> </v-app> </div> </div> </template> <script setup> import { ref } from 'vue' import { useField, useForm } from 'vee-validate' const { handleSubmit, handleReset } = useForm({ validationSchema: { name (value) { if (value?.length >= 2) return true return 'Name needs to be at least 2 characters.' }, phone (value) { if (value?.length > 9 && /[0-9-]+/.test(value)) return true return 'Phone number needs to be at least 9 digits.' }, email (value) { if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true return 'Must be a valid e-mail.' }, select (value) { if (value) return true return 'Select an item.' }, checkbox (value) { if (value === '1') return true return 'Must be checked.' }, }, }) const name = useField('name') const phone = useField('phone') const email = useField('email') const select = useField('select') const checkbox = useField('checkbox') const items = ref([ 'Item 1', 'Item 2', 'Item 3', 'Item 4', ]) const submit = handleSubmit(values => { alert(JSON.stringify(values, null, 2)) }) </script> <style> .container{ display: flex; } .navigation{ width: 25%; } .form{ width: 50%; } </style>

試したこと

styleの部分を色々変更したのですが、うまくいかず…。

補足情報(FW/ツールのバージョンなど)

Vueのバージョンは下記の通りです。
@vue/cli 5.0.8

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

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

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

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

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

guest

回答1

0

ベストアンサー

AIにより生成された文章です

スペースを埋めるためには、v-navigation-drawerとv-appのma-0とpa-0のクラスを削除し、v-navigation-drawerにpermanentとappのプロパティを追加することで解決できます。また、styleの部分も少し修正が必要です。

以下のように修正してみてください。

php

1<template> 2 <div class="container"> 3 <div class="navigation"> 4 <v-navigation-drawer permanent app :width="180"> 5 <v-list-item title="Application" subtitle="Application"></v-list-item> 6 <v-divider></v-divider> 7 <v-list-item link title="Application-A"></v-list-item> 8 <v-list-item link title="Application-B"></v-list-item> 9 <v-list-item link title="Application-C"></v-list-item> 10 </v-navigation-drawer> 11 </div> 12 <div class="form"> 13 <v-app> 14 <form @submit.prevent="submit"> 15 <!-- 入力フォームのコードはそのままで大丈夫です --> 16 </form> 17 </v-app> 18 </div> 19 </div> 20</template> 21 22<script setup> 23// 省略 24</script> 25 26<style> 27.container { 28 display: flex; 29} 30.navigation { 31 width: 180px; 32} 33.form { 34 flex: 1; 35 padding: 20px; 36} 37</style>

主な変更点は以下の通りです。

1.v-navigation-drawerにpermanentとappのプロパティを追加し、ma-0とpa-0のクラスを削除しました。これにより、ナビゲーションメニューが常に表示され、アプリケーションの一部として動作するようになります。

2..navigationのwidthを180pxに変更しました。これはv-navigation-drawerの:widthプロパティと同じ値にすることで、ナビゲーションメニューの幅を固定します。

3..formのwidthをflex: 1に変更し、paddingを追加しました。これにより、入力フォームがナビゲーションメニューの右側の残りのスペースを埋めるようになります。

これらの変更により、ナビゲーションメニューと入力フォームの間のスペースが解消され、左詰めで表示されるようになるはずです。ご確認ください。

投稿2024/03/30 13:09

quiz

総合スコア269

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問