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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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 lang="ts" 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.