Vuetify Example Pen

index.html

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-btn
        color="blue"
        dark
        @click="sheet = !sheet"
      >
        Open v-model
      </v-btn>
      <v-bottom-sheet v-model="sheet" width="500px">
        <v-sheet class="text-center" height="200px">
          <v-btn
            class="mt-6"
            text
            color="red"
            @click="sheet = !sheet"
          >close</v-btn>
          <div class="py-3">This is a bottom sheet using the controlled by v-model instead of activator</div>
        </v-sheet>
      </v-bottom-sheet>
    </div>
  </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    sheet: false,
    tiles: [
      { img: 'keep.png', title: 'Keep' },
      { img: 'inbox.png', title: 'Inbox' },
      { img: 'hangouts.png', title: 'Hangouts' },
      { img: 'messenger.png', title: 'Messenger' },
      { img: 'google.png', title: 'Google+' },
    ],
  }),
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.4/dist/vuetify.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.4/dist/vuetify.min.css" rel="stylesheet" />

vuetify-example-pen.markdown

Vuetify Example Pen

A Pen by whbjzzwjxq on CodePen.

License.