MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add sizing prop to Avatar

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 10:43:06 +02:00
parent 6cee25d16f
commit 01db60162c
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/bbui/src/Avatar/Avatar.svelte
View File

@ -1,5 +1,15 @@
<script> <script>
import "@spectrum-css/avatar/dist/index-vars.css" import "@spectrum-css/avatar/dist/index-vars.css"
let sizes = new Map([
["XXS", "--spectrum-alias-avatar-size-50"],
["XS", "--spectrum-alias-avatar-size-75"],
["S", "--spectrum-alias-avatar-size-200"],
["M", "--spectrum-alias-avatar-size-300"],
["L", "--spectrum-alias-avatar-size-500"],
["XL", "--spectrum-alias-avatar-size-600"],
["XXL", "--spectrum-alias-avatar-size-700"],
])
export let size = "M"
export let url = "" export let url = ""
export let disabled = false export let disabled = false
export let initials = "KA" export let initials = "KA"
@ -11,9 +21,12 @@
class="spectrum-Avatar" class="spectrum-Avatar"
src={url} src={url}
alt="Avatar" alt="Avatar"
style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
/> />
{:else} {:else}
<div>{initials}</div> <div style="width: var({sizes.get(size)}); height: var({sizes.get(size)});">
{initials}
</div>
{/if} {/if}
<style> <style>
@ -29,7 +42,5 @@
rgba(53, 199, 86, 1) 47% rgba(53, 199, 86, 1) 47%
); );
border-radius: 50%; border-radius: 50%;
width: 32px;
height: 32px;
} }
</style> </style>