CODEWITHSUNDEEP
vuetify.js
dino1995
dino1995

Reputation: 37

vuetify: v-checkbox with image as label

I'm trying to creaet a v-checkbox with an image as a label. I've got the problem that I can't give the image a specific size (width) so that it stays in the given v-col space. The image is always a lot wider than the given v-col space.

It didn't worked with #append in the template too.

Here is the code:

    <v-col
      xs="12"
      lg="3"
    >
      <v-checkbox
        v-model="selectedItem"
        :value="item.id"
      >
        <template #label>
          <v-img
            :src="item.logo"
            style="width: 100%"
          />
        </template>
      </v-checkbox>
    </v-col>

My goal is it to have a row with several cols. in the first one should be a checkbox with an image instead of a label. The checkbox and the image should be next to each other in one line and the image shouldn't be wider than the col.

Maybe someone has an idea.

Upvotes: 1

Views: 1045

Answers (1)

hamid niakan
hamid niakan

Reputation: 2871

you can use v-avatar inside of the label slot to control the image size. check the demo below:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    checkbox: false,
    imageSize: 50,
  }
})
<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">
<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>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-slider v-model="imageSize" label="image size" min="25" max="128" style="width: 200px"></v-slider>
        <v-checkbox v-model="checkbox">
          <template v-slot:label>
            <v-avatar tile :size="imageSize">
              <img
                src="https://picsum.photos/id/1025/200"
              > 
            </v-avatar>
          </template>
        </v-checkbox>
      </v-container>
    </v-main>
  </v-app>
</div>

Upvotes: 3

Related Questions