PubAvatar

This is an avatar component that can be used to display a user's profile picture. It provides various options for customizing the avatar, such as adding a border, shadow, and rounded corners.

Default avatar

<template>
  <div class="flex justify-center space-x-4">
    <pub-avatar src="/images/avatar001.jpeg" />
    <pub-avatar src="/images/avatar001.jpeg" rounded />
  </div>
</template>

<script setup>
import { PubAvatar } from 'vuelicity'
</script>

Bordered avatar

Prop - bordered Usage

The bordered prop can be used to add a border to the avatar.

<template>
  <div class="flex justify-center space-x-4">
    <pub-avatar src="/images/avatar001.jpeg" bordered />
    <pub-avatar src="/images/avatar001.jpeg" bordered rounded />
  </div>
</template>

<script setup>
import { PubAvatar } from 'vuelicity'
</script>

Placeholder icon

<template>
    <div class="flex justify-center space-x-4">
        <pub-avatar />
        <pub-avatar rounded />
    </div>
</template>

<script setup>
import { PubAvatar } from "vuelicity";
</script>

Placeholder initials

Prop - initials Usage

The initials prop can be used to display the initials of the user.

PC

PC

<template>
    <div class="flex justify-center space-x-4">
        <pub-avatar initials="PC"/>
        <pub-avatar initials="PC" rounded />
    </div>
</template>

<script setup>
import { PubAvatar } from "vuelicity";
</script>

Alternate placeholder icon

Slot - placeholder Usage

The placeholder slot can be used to display a custom placeholder icon.

<template>
    <div class="flex justify-center space-x-4">
        <pub-avatar>
            <template #placeholder>
                <pub-icon name="user-circle" aschild />
            </template>
        </pub-avatar>
        <pub-avatar rounded>
            <template #placeholder>
                <pub-icon name="user-circle" aschild />
            </template>
        </pub-avatar>
    </div>
</template>

<script setup>
import { PubAvatar, PubIcon } from "vuelicity";
</script>

Dot indicator

Prop - status Usage

<template>
  <div class="flex justify-center space-x-4">
    <pub-avatar src="/images/avatar003.jpeg" status="online"/>
    <pub-avatar src="/images/avatar003.jpeg" status="busy" />
    <pub-avatar src="/images/avatar003.jpeg" status="offline" />
    <pub-avatar src="/images/avatar003.jpeg" status="away" />
  </div>
</template>

<script setup>
import { PubAvatar } from 'vuelicity'
</script>

Dot indicator position

Prop - statusPosition Usage

The statusPosition prop can be used to adjust the position of the dot indicator.

<template>
    <div class="flex justify-center space-x-4">
        <pub-avatar src="/images/avatar003.jpeg" status="online" status-position="top-left" />
        <pub-avatar src="/images/avatar003.jpeg" status="online" status-position="top-right" />
        <pub-avatar src="/images/avatar003.jpeg" status="online" status-position="bottom-left" />
        <pub-avatar src="/images/avatar003.jpeg" status="online" status-position="bottom-right" />
    </div>
</template>

<script setup>
import { PubAvatar } from "vuelicity";
</script>

Sizes

Prop - size Usage

The size prop can be used to adjust the size of the avatar.

<template>
  <div class="flex justify-center items-center space-x-4">
    <pub-avatar src="/images/avatar002.jpeg" size="xs"/>
    <pub-avatar src="/images/avatar002.jpeg" size="sm" />
    <pub-avatar src="/images/avatar002.jpeg" size="md" />
    <pub-avatar src="/images/avatar002.jpeg" size="lg" />
    <pub-avatar src="/images/avatar002.jpeg" size="xl" />
  </div>
</template>

<script setup>
import { PubAvatar } from 'vuelicity'
</script>

Stacked avatars

Prop - stacked Usage

The stacked prop can be used to stack multiple avatars together.

+99

<template>
    <div class="grid gap-2">
        <pub-avatar-stack>
            <pub-avatar src="/images/avatar001.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar002.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar003.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar004.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar005.jpeg" rounded stacked />
        </pub-avatar-stack>
        <pub-avatar-stack>
            <pub-avatar src="/images/avatar001.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar002.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar003.jpeg" rounded stacked />
            <pub-avatar src="/images/avatar004.jpeg" rounded stacked />
            <pub-avatar-stack-counter href="#" total="99" />
        </pub-avatar-stack>
    </div>
</template>

<script setup>
import { PubAvatar, PubAvatarStack, PubAvatarStackCounter } from "vuelicity";
</script>

Alternative text

Prop - alt Usage

The alt prop can be used to provide alternative text for the avatar.

<template>
  <div class="flex justify-center space-x-4">
    <pub-avatar src="/images/avatar001.jpeg" alt="Carolina Avatar" />
  </div>
</template>

<script setup>
import { PubAvatar } from 'vuelicity'
</script>

Reference

PubAvatar

Properties

Name	Type	Default	Description	Options
src	String	''	The source URL for the avatar image.
alt	String	''	Alternative text for the avatar image.
size	String	'md'	The size of the avatar.	'xs', 'sm', 'md', 'lg', 'xl'
bordered	Boolean	false	Whether to add a border to the avatar.
rounded	Boolean	false	Whether to add rounded corners to the avatar.
initials	String	''	Initials to display as a placeholder.
status	String	''	The status indicator theme or state.	'online', 'offline', 'busy', 'away'
statusPosition	String	'bottom-right'	The position of the status indicator.	'top-right', 'top-left', 'bottom-right', 'bottom-left'
stacked	Boolean	false	Whether the avatar is part of a stacked group.
class	String	''	Additional CSS classes to apply.

Slots

Name	Description
placeholder	Custom content to display as a placeholder icon.

PubAvatarStack

Slots

Name	Description
default	Slot for PubAvatar components.

PubAvatarStackCounter

Properties

Name	Type	Default	Description	Options
total	Number	0	The total number of items.
href	String	''	The href attribute for the counter link.