add sizing prop to Avatar
This commit is contained in:
parent
e46ea324b5
commit
0a8babd24d
|
@ -1,5 +1,15 @@
|
|||
<script>
|
||||
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 disabled = false
|
||||
export let initials = "KA"
|
||||
|
@ -11,9 +21,12 @@
|
|||
class="spectrum-Avatar"
|
||||
src={url}
|
||||
alt="Avatar"
|
||||
style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
|
||||
/>
|
||||
{:else}
|
||||
<div>{initials}</div>
|
||||
<div style="width: var({sizes.get(size)}); height: var({sizes.get(size)});">
|
||||
{initials}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
@ -29,7 +42,5 @@
|
|||
rgba(53, 199, 86, 1) 47%
|
||||
);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue