Vuetify
概要 v-btnの文字を改行する方法を示す。 ソースコード <template> <v-app> <div> <h1>button new line</h1> <div class="mt-6 mb-6"> <v-btn class="new-line-button text-pre-wrap text-left" block>{{textHello}}</v-btn> </div> <div class="mb-6"> <v-btn class="new-line-button text-pre-wrap text-left" block>{{textNewLine}}</v-btn> </div></div></v-app></template>
概要 Vuetifyのv-text-fieldの入力文字の色はデフォルトでは黒か白であるが、その色を変更する方法を記載する。 ソースコード <script> <v-text-field class="input-color-red-class" > </v-text-field> </script> <style> .input-color-red-class.v-text-field >>> input { color: r</style>…
概要 Vuetifyによる3カラムレイアウトのコードを記述する。 3カラムレイアウトのイメージ図 実際の完成ページ 1. 画面が大きい(lg)かつサイドバーを開いた場合 2. 画面が大きい(lg)かつサイドバーを閉じた場合 3. 画面が小さい(sm)場合 ソースコード 今回はN…
概要 Vuetifyのv-text-fieldについて、文字を記入する前も記入中にも、記入欄にはアンダーラインが記載されている。それをなくしたい。初期状態はアンダーラインがないが、クリックするとアンダーラインが表示される。 逆もできるし、クリックするかどうか関…
概要 Vuetifyのv-text-fieldにおいて記入される文字が大きいと、文字の表示が隠れるバグがある。ただし、そのようなバグはSafariのみに発生する。 その解決方法を提示する。 修正前 左側がSafariで右がChromeでの表示。Safariだと文字が隠れる。 修正後 左側…
概要 例えばあるカテゴリを選択すると、自動的にそのサブカテゴリが選択できるようにしたい。 Vuetifyのv-selectを2つ使ってその方法を示す。 解説 基本文法 解決策 その1 その2 セレクトの戻り値を取得する方法 サブカテゴリについて バグの修正について Ap…