vuetify
vuetify copied to clipboard
fix(VListItem): fix avatar-badge spacing
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>