CODEWITHSUNDEEP
cssvue.jssassvuetify.js
Paolo Fabrizio
Paolo Fabrizio

Reputation: 43

How can I add a custom style to an v-dialog in vuetify after the latest update?

I'm working with vuetify and I need to add a custom class to an v-dialog. I've already search information about it, but my problem is that the prop "content-class" has been removed from vuetify. What can I do then? Is there another way?

<v-dialog v-model="loginUserDialog" content-class="loginmodalbox" max-width="600px" persistent>
</v-dialog>

.loginmodalbox .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
 }

Upvotes: 1

Views: 1429

Answers (1)

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4434

Prop content-class is still available:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      dialog: false,
    }
  },
})
.loginmodalbox .v-card__title {
  background: red!important;
  color: white!important;
}
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog v-model="dialog" width="500" content-class="loginmodalbox">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="red lighten-2"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Click Me
          </v-btn>
        </template>

        <v-card>
          <v-card-title>
            Privacy Policy
          </v-card-title>

          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </v-card-text>

          <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>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</div>

Upvotes: 1

Related Questions