[Vue.js]Vuetifyで汎用性のあるボトムシートを表示する方法[v-bottom-sheet]

Vuetify関連の記事_v-bottom-sheetについて

Vuetifyで、汎用性のあるボトムシートを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、17回目になります。
今回は、Webアプリ等で目にする事のあるUIパーツ、ボトムシートについてです。
これを表示するために、文字通り v-bottom-sheet というコンポーネントを使っていきます。

↑v-bottom-sheet を使って、こういったものを表示してみます。

ボトムシートってどんなもの?

ボトムシート、という概念ですが
これはマテリアルデザインのUIコンポーネントのひとつです。
(マテリアルデザインを具現化しているVuetifyにUIコンポーネントがある、ということは、当然マテリアルデザイン自体にもそういう概念がある、という事ですね)

詳しい解説が、次のリンク先にあります。
Bottom sheets – Components – Material Design

↑このMaterial Design公式ページの解説にもありますが、ボトムシートは
ユーザーアクションによって下からスライドインする、シート型のダイアログのことです。
(公式解説の例として、Google Map のピンをタップした時にスライドインしてくるボトムシートの例や、ログイン方法を選択してもらう際の例が載っているので、わかりやすいかと思います。)

Vuetify公式では、
“ボトムシートは、v-bottom-navigation に似た、画面の下からスライドするように改良された v-dialog です。”
と解説されていますね。

ボトムシートが何者かわかったところで、
では、コードなどを見ていきましょう。

↑ボトムシートです。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

基本のコードをご紹介

<template>
  <v-btn
    color="indigo"
    dark
    @click="myBottomSheet = !myBottomSheet"
  >
    bottom sheet を開く
  </v-btn>

  <v-bottom-sheet v-model="myBottomSheet">
    <v-sheet
      class="text-center"
      height="48%"
    >
      <p style="padding: 2rem;">
        v-bottom-sheet のサンプル
      </p>
      <div style="padding: 2rem;">
        <v-btn
          color="pink"
          dark
          @click="myBottomSheet = !myBottomSheet"
        >
          bottom sheet を閉じる
        </v-btn>
      </div>
    </v-sheet>
  </v-bottom-sheet>
</template>

↑2〜8行目にある通り、
まず、ボトムシートを開く事ができるボタンを用意します。(必ずしもボタンである必要はなく、ユーザーが能動的に押せる何かがあれば良いです)
10行目の v-bottom-sheet から、末尾の v-bottom-sheet の閉じタグまでが
ボトムシートの本体です。

ボタンには、

@click="myBottomSheet = !myBottomSheet"

として、@click を指定して、
true/false の切り替えを行なっています。
10行目の v-bottom-sheet に v-model で紐づいている
myBottomSheet という(名前は何でも良いです)、真偽値を受け取る data の値を切り替えることによって
ボトムナビゲーションを表示/非表示している、というわけです。

data については、例えば次のように用意しておきます。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    myBottomSheet: false,
  }
});
</script>

実際に動くサンプル

今回も、実際に動くサンプルがあります。
次のリンクより、ご覧いただけます。
Vuetifyのボトムシート(v-bottom-sheet)のサンプル

設定可能なオプションなど

v-bottom-sheet についても、上記の基本形のほかに、props に値を渡す事でオプション指定ができます。

横幅を調節する

<template>
  <v-btn
    color="indigo"
    dark
    @click="myBottomSheet = !myBottomSheet"
  >
    bottom sheet を開く
  </v-btn>

  <v-bottom-sheet
    v-model="myBottomSheet"
    width="640px" // または inset prop が使用可能
  >
    <v-sheet
      class="text-center"
      height="48%"
    >
      <p style="padding: 2rem;">
        v-bottom-sheet のサンプル
      </p>
      <div style="padding: 2rem;">
        <v-btn
          color="pink"
          dark
          @click="myBottomSheet = !myBottomSheet"
        >
          bottom sheet を閉じる
        </v-btn>
      </div>
    </v-sheet>
  </v-bottom-sheet>
</template>

↑12行目にある通り、 width という prop に値を渡す事で、ボトムシートの横幅の調節が可能です。
また、inset という prop を true にすると、ちょうど画面の70%ほどの横幅にする事もできます。

背景の半透明グレーのオーバーレイを消す

<template>
  <v-btn
    color="indigo"
    dark
    @click="myBottomSheet = !myBottomSheet"
  >
    bottom sheet を開く
  </v-btn>

  <v-bottom-sheet
    v-model="myBottomSheet"
    hide-overlay
    persistent
  >
    <v-sheet
      class="text-center"
      height="48%"
    >
      <p style="padding: 2rem;">
        v-bottom-sheet のサンプル
      </p>
      <div style="padding: 2rem;">
        <v-btn
          color="pink"
          dark
          @click="myBottomSheet = !myBottomSheet"
        >
          bottom sheet を閉じる
        </v-btn>
      </div>
    </v-sheet>
  </v-bottom-sheet>
</template>

↑こちらも12行目にある通り、 hide-overlay という prop を true にすると、背景の半透明グレーのオーバーレイが付かない状態にする事ができます。
この状態は、たとえば Google map の

「ピンをクリックした時に、
情報が載っているシートが下からスライドインする様なUI」

を作る時に、役立つ状態かと思います。
また、この hide-overlay の使用時は、
presistent という prop を併用して、ボトムシートの外側をクリックしても閉じない様にしておくと、
より機能として明確なUIになると思います。

メニューや選択肢としての利用

<template>
  <v-btn
    color="indigo"
    dark
    @click="myBottomSheet = !myBottomSheet"
  >
    bottom sheet を開く
  </v-btn>

  <v-bottom-sheet
    v-model="myBottomSheet"
    hide-overlay
    persistent
  >
    <v-sheet
      class="text-center"
      height="48%"
    >
      <v-list rounded>
        <v-list-item-group
          color="indigo"
        >
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-message-processing-outline</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Talk enable</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-message-bulleted-off</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Talk disable</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-file-image</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Add image</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-movie-edit</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Add movie</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        </v-list-item-group>
      </v-list>
      
      <div style="padding: 2rem;">
        <v-btn
          color="pink"
          dark
          @click="myBottomSheet = !myBottomSheet"
        >
          bottom sheet を閉じる
        </v-btn>
      </div>
    </v-sheet>
  </v-bottom-sheet>
</template>

↑このように、リストメニューを入れる事で、ボトムシートをメニューとして機能させる事もできます。
上記の例では、19〜60行目にある通り、便宜上 v-list コンポーネントを入れていますが、
別にこれは普通に ul と li 等で出来たリストを入れても、もちろん大丈夫です。
(v-icon内では、 Material Design Icons のアイコンを表示させています)

オプション( props )を加えたサンプル

props を加えたサンプルを、基本形のv-bottom-sheetのサンプルの下に作成してあります。
次のリンクより、確認する事ができます。
Vuetifyのボトムシート(v-bottom-sheet)のサンプル

公式ドキュメント、APIページなど

v-bottom-sheet コンポーネントの Vuetify 公式ページは以下です。

ボトムシート・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧がこのページに記載されています。
v-bottom-sheet API — Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
ボトムシートを扱うことができる v-bottom-sheet について、ご紹介しました。

この記事の冒頭にもリンクがありますが、Google の Material Design 公式ページの解説も合わせて読むと、
「ボトムシート」というUIパーツの本来の意図や構成要素、
派生としてつくることができるもの(公式の例では、オーディオプレーヤーとしての利用方法なども載っていて、ユニークです)
も知る事ができるので、一読をおすすめします。
Bottom sheets – Components – Material Design

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。