discovery.vue

<template>
  <v-app>
    <v-content>
      <v-container >
        <v-app-bar app>
          <v-app-bar-nav-icon id="nav">
          </v-app-bar-nav-icon>
        </v-app-bar>
        <v-layout row wrap justify-center>
          <v-flex xs6 text-xs-center>
            <v-card>
              <v-card-text>
                <v-layout row wrap justify-center>
                  <v-flex xs12 text-xs-center>
                    <h2>V Feature Discovery</h2>
                    <p>Currently overlay is not working since reqriting in TypeScript. Also should probably have a min height.</p>
                  </v-flex>
                </v-layout>

                <v-layout row wrap justify-center>
                  <v-spacer></v-spacer>
                  <v-switch label="top" v-model="top" style="flex-grow: 0"></v-switch>
                  <v-spacer></v-spacer>
                  <v-switch label="left" v-model="left" style="flex-grow: 0"></v-switch>
                  <v-spacer></v-spacer>
                  <v-switch label="flat" v-model="flat" style="flex-grow: 0"></v-switch>
                  <v-spacer></v-spacer>
                </v-layout>
                <v-layout row wrap justify-center>
                  <v-spacer></v-spacer>
                  <v-switch label="hide-overlay" v-model="hideOverlay" style="flex-grow: 0"></v-switch>
                  <v-spacer></v-spacer>
                  <v-switch label="persistent" v-model="persistent" style="flex-grow: 0"></v-switch>
                  <v-spacer></v-spacer>
                </v-layout>
                <v-layout row wrap justify-center>
                  <v-flex xs6 text-xs-center>
                    <v-text-field
                      type="number"
                      label="height"
                      v-model="height"
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="discover = !discover" id="feature">Discover</v-btn>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>

        <v-feature-discovery
          :flat="flat"
          :persistent="persistent"
          :size="height"
          v-model="discover"
          target="#nav"
        ></v-feature-discovery>

      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      discover: true,
      top: false,
      left: false,
      hideOverlay: false,
      flat: false,
      persistent: true,
      height: 1000
    })
  }
</script>