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

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

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 に関する記事を掲載していく予定です。

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