Components

ExAvatar

SK

SK

Demo

<ExAvatar :size="48" :radius="48">
    <img src="image-url">
</ExAvatar>

<script setup lang="ts">
import { ref } from 'vue'

const size = ref(48) // string | number
const radius = ref(48) // string | number
</script>

Example-1

<ExAvatar
    class="text-body bg-primary border-border hover:scale-105 hover:transition-all place-items-center grid shadow-lg"
    :size="48"
    :radius="48"
>
    <img
        :src="https://picsum.photos/id/135/48/48"
        class="rounded-inherit object-cover w-full h-full"
    >
</ExAvatar>

Example-2

<ExAvatar
    class="text-body bg-primary border-border hover:scale-105 hover:transition-all place-items-center grid shadow-lg"
    :size="48"
    :radius="48"
>
    SK
</ExAvatar>

Example-3

<div class="flex items-center">
    <ExAvatar
        class="text-body bg-primary border-border hover:scale-105 hover:transition-all place-items-center grid shadow-lg"
        :size="48"
        :radius="48"
    >
        <img
            :src="https://picsum.photos/id/157/48/48"
            class="rounded-inherit object-cover w-full h-full"
        >
    </ExAvatar>

    <ExAvatar
        class="text-primary bg-body border-border hover:scale-105 hover:transition-all place-items-center grid -ml-6 shadow-lg"
        :size="48"
        :radius="48"
    >
        SK
    </ExAvatar>

    <ExAvatar
        class="text-body bg-primary border-border hover:scale-105 hover:transition-all place-items-center grid -ml-6 shadow-lg"
        :size="48"
        :radius="48"
    >
        <img
            :src="https://picsum.photos/id/257/48/48"
            class="rounded-inherit object-cover w-full h-full"
        >
    </ExAvatar>
</div>

Interact

Size:

Border Radius:

 

Props

as

Type	Default	Required
string component	template	false

Description: Sets the element type of ex-avatar. Any custom vue component can also be passed.

---

size

Type	Default	Required
string number	48	false

Description: Sets the width and height of ex-avatar. It also takes both width and height parameters.

Passing size="100 50" as a value will result in width: 100px and height: 50px. Values can also be percentages.

---

radius

Type	Default	Required
string number	48	false

Description: Sets the border radius for ex-avatar. It can also take 4 values mentioning individual corner radius of an element.

Passing size="20 30 40 50" as a value will result in border-radius: 20px 30px 40px 50px. Values can also be percentages.

---

tile

Type	Default	Required
boolean	false	false

Description: Removes border radius to the ex-avatar element, if set using radius prop.

---

width

Type	Default	Required
string number	undefined	false

Description: Sets the width of ex-avatar. width takes precedence over size. Values can also be percentages.

---

height

Type	Default	Required
string number	undefined	false

Description: Sets the height of ex-avatar. height takes precedence over size. Values can also be percentages.

---

minWidth

Type	Default	Required
string number	undefined	false

Description: Sets the min-width of ex-avatar. Values can also be percentages.

---

minHeight

Type	Default	Required
string number	undefined	false

Description: Sets the min-height of ex-avatar. Values can also be percentages.

---

maxWidth

Type	Default	Required
string number	undefined	false

Description: Sets the max-width of ex-avatar. Values can also be percentages.

---

maxHeight

Type	Default	Required
string number	undefined	false

Description: Sets the max-height of ex-avatar. Values can also be percentages.

Slots

Name	Description
default	The default Vue slot