creating an expandable app bar with datepicker in vuetify

Question

I am trying to create an expandable app bar in Vuetify, which shows a datepicker within the app bar when the app bar is expanded.

When the app bar is expanded, the datepicker is shown as an overlay instead of expanding the app bar. How do I make the app bar expand to contain the datepicker instead of showing the datepicker on top of the app bar.

I have created a codepen as an example: https://codepen.io/thomasabcd/pen/eYmOoVQ

<div id="app">
  <v-app id="inspire">
    <div>
      <v-app-bar dark>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon @click="extended=!extended">
          <v-icon>mdi-calendar</v-icon>
        </v-btn>

        <template v-slot:extension v-if="extended">
          <v-date-picker full-width />
        </template>
      </v-app-bar>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
      extended: false
    }
  }
})

The doc here suggests to use v-content for dynamically sizing. vuetifyjs.com/en/components/… — Ankit Kante
I'll try to come up with a working code. Meanwhile, please experiment with v-content — Ankit Kante

Zim Zim · Accepted Answer · 2019-12-01T19:43:58

Use the extension-height prop of the app-bar..

    <v-app-bar dark extension-height="100%">
          <v-toolbar-title>Page title</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="extended=!extended">
              <v-icon>mdi-calendar</v-icon>
          </v-btn>
          <template v-slot:extension v-if="extended">
              <v-date-picker full-width dark />
          </template>
    </v-app-bar>

https://codeply.com/p/tJ3HM4HRZg

creating an expandable app bar with datepicker in vuetify

1 Answers