Vuetify Example Pen

index.html

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-bottom-sheet v-model="sheet" persistent hide-overlay>
        <template v-slot:activator="{ on }">
          <v-btn
            color="purple"
            dark
            v-on="on"
          >
            Open Usage
          </v-btn>
        </template>
        <v-sheet class="text-center" height="200px">
          <v-btn
            class="mt-6"
            flat
            color="red"
            @click="sheet = !sheet"
          >close</v-btn>
          <div>The basic usage of v-bottom-sheet. Almost any content can be placed inside this component</div>
        </v-sheet>
      </v-bottom-sheet>
    </div>
  </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    sheet: false,
  }),
})

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.0.18/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@3.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.0.18/dist/vuetify.min.css" rel="stylesheet" />

vuetify-example-pen.markdown

Vuetify Example Pen

A Pen by whbjzzwjxq on CodePen.

License.