CODEWITHSUNDEEP
javascripthtmlvue.jsvuetify.js
yukashima huksay
yukashima huksay

Reputation: 6238

Put overlay on fab buttons in vuetify

As you can see in the below snippet, the overlay doesn't get the circular form of the fab button. How can I make it do so?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      choices: [{
          text: "Foo",
          isCorrect: true
        },
        {
          text: "Bar",
          isCorrect: false
        }
      ]
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-hover v-slot:default="{ hover }">
      <v-btn light fab large color="primary">
        <v-overlay absolute :value="!hover">
          b
        </v-overlay>
        a
      </v-btn>
    </v-hover>
  </div>
</body>

</html>

I could do this with css but I'm looking for some solution through vuetify.

Upvotes: 4

Views: 1277

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

Try to add the following CSS rules, and don't forget to add class to your btn(class="btn--overlayed"):

.btn--overlayed .v-btn__content {
  position: static;
}

.btn--overlayed .v-overlay {
  border-radius: 50%;
}

Code snippet

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      choices: [{
          text: "Foo",
          isCorrect: true
        },
        {
          text: "Bar",
          isCorrect: false
        }
      ]
    }
  }
})
.btn--overlayed .v-btn__content {
  position: static;
}

.btn--overlayed .v-overlay {
  border-radius: 50%;
}
<!DOCTYPE html>
<html>

<head>
  <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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-hover v-slot:default="{ hover }">
      <v-btn light fab large color="primary" class="btn--overlayed">
        <v-overlay absolute :value="!hover">
          b
        </v-overlay>
        a
      </v-btn>
    </v-hover>
  </div>
</body>

</html>

Upvotes: 2

Related Questions