vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(VListItem): fix avatar-badge spacing

Open zaviermiller opened this issue 1 year ago • 0 comments

fixes #20573

Description

I added new selectors targeting an avatar within a badge in the VListItem. These new selectors will ensure consistent spacing between list item content and an avatar when the avatar is wrapped in a badge.

Markup:

<template>
  <!-- Prepend slot -->
  <v-list>
    <v-list-item title="Zavier Miller">
      <template #prepend>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item title="Zavier Miller">
      <template #prepend>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Append slot -->
  <v-list>
    <v-list-item title="Zavier Miller">
      <template #append>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item title="Zavier Miller">
      <template #append>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Slim list with prepend -->
  <v-list>
    <v-list-item slim title="Zavier Miller">
      <template #prepend>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item slim title="Zavier Miller">
      <template #prepend>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>

  <!-- Slim list with append -->
  <v-list>
    <v-list-item slim title="Zavier Miller">
      <template #append>
        <v-avatar>ZM</v-avatar>
      </template>
    </v-list-item>
    <v-list-item slim title="Zavier Miller">
      <template #append>
        <v-badge dot bordered color="primary">
          <v-avatar>ZM</v-avatar>
        </v-badge>
      </template>
    </v-list-item>
  </v-list>
</template>

zaviermiller avatar Oct 17 '24 13:10 zaviermiller