CODEWITHSUNDEEP
vue.jsmodal-dialogvuetify.js
Adarsh Madrecha
Adarsh Madrecha

Reputation: 7896

v-dialog not formatting as expected

Currently dialog is showing as below.

Current dialog

Expected to show as below

How to show

html markup

  <v-dialog v-model="dialog" width="500">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">Click</v-btn>
    </template>
    <v-card>
      <v-card-title primary-title>Details</v-card-title>
      <v-card-text>Hello</v-card-text>
    </v-card>
  </v-dialog>

The script has dialog in the data property. I am trying to achieve the same look and feel as shown in the documentation. Using "vuetify": "^2.0.1", "vuetify-loader": "^1.3.0"

Upvotes: 2

Views: 270

Answers (1)

Cathy Ha
Cathy Ha

Reputation: 1677

You need to add "grey lighten-2" to the v-card-title to achieve the grey background effect. Add the following to your code if you want the divider and action button as well:

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="primary"
              text
              @click="dialog = false"
            >
              I accept
            </v-btn>
          </v-card-actions>

The code for the documentation is here.

Upvotes: 1

Related Questions