jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update example for alternate avatar placeholder

Browse Source
This commit is contained in:
Jim Kriz
2023-04-05 07:22:26 -04:00
parent d40c9dcc32
commit a1bac4bebb
3 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Avatar/Avatar.vue
View File

@@ -1,20 +1,16 @@
<template>
<div class="relative">
<img v-if="img && !imageError" :class="avatarClasses" :src="img" :alt="alt" @error="setImageError">
<template v-else>
<div v-if="initials" :class="avatarPlaceholderWrapperClasses">
<div :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
</div>
<div v-else-if="!initials && !hasPlaceholder" :class="avatarPlaceholderWrapperClasses">
<svg :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
<div v-else :class="avatarClasses">
<div v-else :class="avatarPlaceholderWrapperClasses">
<svg v-if="!initials && !hasPlaceholder" :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
<div v-if="!initials && hasPlaceholder" :class="avatarPlaceholderClasses">
<slot name="placeholder" />
</div>
</template>
<span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
<div v-else :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
<span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
</div>
</div>
</template>
<script lang="ts" setup>