Vuetifyのv-btnのアルファベットが大文字になるのはなぜ？

3146 ワード
MaterialDesign Vuetify MaterialDesign テキストリンク

Vuetifyのv-btnのアルファベットが大文字になるのはなぜ？

マテリアルデザインの仕様である

Button anatomy - Material Design
Button Text button - Material Design

マテリアルデザインでは基本的にボタンのテキストにはアッパーケースのアルファベットを用います。
こちらを元にVuetifyではcssでtext-transformでアルファベットを大文字に変えています。

解決法1. CSS

How to make the global text not uppercase/capitalize - GitHub

特定のコンポーネント全体に適用したい場合はstyleに下記を指定して上書きする。


<style scoped>
*{ text-transform: none !important; }
</style>

私のおすすめはVuetifyのv-btnをそのまま使わずにSubmitButton.vueのようなファイルを作り、
そのコンポーネント内にスタイルを当てる方法をおすすめします。

解決法2. Vuetifyのclassの指定

Text and typography Text transform - Vuetify

下記が利用例になります。
ご覧の通り大文字化を防ぐスタイルが当てられているのではなく、先頭大文字にするスタイルが当てられている点に注意してください。

<!-- 表示: 「Submit」 -->
<v-btn class="text-capitalize">Submit</v-btn>

<!-- 表示: 「Submit Low Text」 -->
<v-btn class="text-capitalize">Submit low text</v-btn>

<!-- 表示: 「Submit TextTest」 -->
<v-btn class="text-capitalize">Submit testTest</v-btn>

<!-- 表示: 「Submitボタン」 -->
<v-btn class="text-capitalize">submitボタン</v-btn>