Vuetifyのラジオボタン(v-radio)を横並びにしたい。
→propsに row を指定すればOK
まず、普通に書くと以下の画像のように縦並びになります
<v-radio-group>
<v-radio label="はい" value="radio-1"></v-radio>
<v-radio label="どちらでもない" value="radio-2"></v-radio>
<v-radio label="いいえ" value="radio-3"></v-radio>
</v-radio-group>
どうにかこれを横並びにしたかったのですが、
「Vuetify ラジオボタン 横」などのバカっぽい検索を繰り返してもなかなか情報が出てきませんでした。
Vuetifyを使わない素のラジオボタンなら、「インライン要素にせよ」などの情報が出てきますが
いろいろ試すも一生縦のまま。
が、公式リファレンスを眺めていると、ばっちり書いてありました。
Radios - Direction
ラジオグループは、それぞれのpropsを使用して、行(row)または列(column)にできます。既定値は column です。
"横並び"など、縦横という言葉に囚われていたので見落としていました。
ページ内検索だけでなく、ざっと全体を読むことも大事ですね……
<v-radio-group row >
<v-radio label="はい" value="radio-1"></v-radio>
<v-radio label="どちらでもない" value="radio-2"></v-radio>
<v-radio label="いいえ" value="radio-3"></v-radio>
</v-radio-group>