2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetifyでラジオボタン(v-radio)を横並びにする方法

Last updated at Posted at 2020-07-06

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>


radio_tate.png

どうにかこれを横並びにしたかったのですが、
「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>


radio_yoko.PNG

2
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?