add sizing prop to Avatar
This commit is contained in:
parent
e46ea324b5
commit
0a8babd24d
1 changed files with 14 additions and 3 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue