【Vuetify】ボタンの表示位置（左寄せ・中央・右寄せ）を指定する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでボタンの表示位置（左寄せ・中央・右寄せ）を指定する方法をご紹介しています。

Vuetifyでボタンの位置を指定したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

ボタンの表示位置を指定する方法

Vuetifyでボタンの表示位置を指定する方法はいくつかあると思いますが、個人的に扱いやすいのは下記の方法です。

親要素にjustify-contentを指定する
スペーシングヘルパーを使用する
Propsのleftとrightを使用する

それぞれ詳しくご紹介していきます。

親要素にjustify-contentを指定する

表示位置を指定するボタンの親要素にFlexプロパティのjustify-contentを指定します。

VuetifyにはPropsとClassが用意されていますので、両方のパターンのサンプルを用意しています。v-rowには予めflexが設定されていますが、v-col等でボタンをラップする場合は別途flexを指定する必要があります。

Props

<v-app id="app">
    <v-row justify="start">
        <v-btn>Left</v-btn>
    </v-row>
    <v-row justify="center">
        <v-btn>Center</v-btn>
    </v-row>
    <v-row justify="end">
        <v-btn>Right</v-btn>
    </v-row>
</v-app>

Class

<v-app id="app">
    <v-row class="justify-start">
        <v-btn>Left</v-btn>
    </v-row>
    <v-row class="justify-center">
        <v-btn>Center</v-btn>
    </v-row>
    <v-row class="justify-end">
        <v-btn>Right</v-btn>
    </v-row>
</v-app>

実行結果は下記のようになります。ボタンが指定位置に表示されています。

See the Pen by ryohei (@intotheprogram) on CodePen.

https://vuetifyjs.com/ja/styles/flex/

スペーシングヘルパーを使用する

スペーシングヘルパーを使用してmarginを指定します。marginで要素の位置を調整するのはCSSでもよくやる手法ですね。それぞれ下記のように指定します。

左寄せ：margin-right: auto
中央寄せ：margin-left: auto、margin-right: auto
右寄せ：margin-left: auto

Vuetifyのスペーシングヘルパーを使って指定してみます。

<v-app id="app">
    <v-row>
        <v-btn class="mr-auto">Left</v-btn>
    </v-row>
    <v-row>
        <v-btn class="mx-auto">Center</v-btn>
    </v-row>
    <v-row>
        <v-btn class="ml-auto">Right</v-btn>
    </v-row>
</v-app>

実行結果はこちら。

See the Pen 7123-2 by ryohei (@intotheprogram) on CodePen.

指定した位置に要素が表示されていますね。スペーシングヘルパーの詳細については下記をご参照ください。慣れると戻れなくなるくらい楽に指定できます。

https://vuetifyjs.com/ja/styles/spacing/

Propsのleftとrightを使用する

v-btnのPropsで表示位置を左寄せ・右寄せにします。Propsを使用する場合、前提としてv-btnにpositionのabsoluteかfixedが設定されている必要があります。中央寄せにはできないですが、positionで調整する場合に便利です。

<v-app id="app">
    <v-row>
        <v-btn absolute left>Left</v-btn>
    </v-row>
    <v-row>
        <v-btn absolute right>Right</v-btn>
    </v-row>
</v-app>

実行結果はこちら。

See the Pen 7123-3 by ryohei (@intotheprogram) on CodePen.

要素が浮いてしまっていますが、指定した位置にボタンが表示されています。

v-btnのPropsについては下記をご参照ください。

https://vuetifyjs.com/ja/api/v-btn/