Avatar

The avatar component displays a user’s avatar and name, and provides a menu of actions when clicked.

Name

Use the name prop to add the name of the user. Can be overridden by default slot. name prop is required.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar name="User Name" />
  </div>
</template>

Image

Use the image prop to change user’s profile image. image slot can be used to override the image prop. If no prop or slot is presented fallback image will be used.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar
      name="User Name"
      image="https://userstock.io/data/wp-content/uploads/2017/07/pexels-photo-26939-1-300x300.jpg"
    />
  </div>
</template>

Variant

Use variant to change the style and appearance of your avatar. Default variant is md.

<template>
  <div style="background: #ACB5C9">
    <DemoGrid>
      <ci-avatar variant="sm" name="Small size" />
      <ci-avatar variant="md" name="Medium size" />
      <ci-avatar variant="lg" name="Large size" />
    </DemoGrid>
  </div>
</template>

Colapsed

Use the collapsed prop to hide part of avatar component. Whet set to true only user’s profile image will be shown. False by default.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar
      name="User Name"
      :menu="menu"
      collapsed
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 'profile', icon: 'user', text: 'My Profile' },
        { id: 'logout', icon: 'logout', text: 'Logout' }
      ]
    }
  }
}
</script>

Menu

menu prop is an array of menu items to display when the avatar is clicked.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar
      name="User Name"
      :menu="menu"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 'profile', icon: 'user', text: 'My Profile' },
        { id: 'logout', icon: 'logout', text: 'Logout' }
      ]
    }
  }
}
</script>

Avatar menu item has following properties.

Property	Type	Description	Required
id	String	Unique identifier for menu item, used in click event	true
icon	String	Icon that is displayed before text	false
text	String	Text that is displayed in menu item	true
destructive	Boolean	If enabled changes menu item text to red	false
disabled	Boolean	Disables menu item	false

Menu slot

menu slot can be used to pass in any custom content to display.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar
      name="User Name"
    >
      <template #menu>
        <b>This is custom content</b>
        <ci-divider />
        This is new line
      </template>
    </ci-avatar>
  </div>
</template>

Menu Placement

The menu-placement prop can be used to adjust placement of opened menu.

<template>
  <DemoGrid>
    <div
      v-for="option in placementOptions"
      style="background: #ACB5C9"
      :key="option"
    >
      <ci-avatar
        :name="option"
        :menu="menu"
        :menu-placement="option"
      />
    </div>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      placementOptions: [
        'right-start',
        'right',
        'right-end',
        'bottom-end',
        'bottom',
        'bottom-start',
        'left-end',
        'left',
        'left-start',
        'top-start',
        'top',
        'top-end'
      ],
      menu: [
        { id: 'profile', icon: 'user', text: 'My Profile' },
        { id: 'logout', icon: 'logout', text: 'Logout' }
      ]
    }
  }
}
</script>

Menu Offset

The menu-offset prop can be used to adjust offset placement of opened menu.

<template>
  <DemoGrid>
    <div
      v-for="option in offsets"
      style="background: #ACB5C9"
      :key="option"
    >
      <ci-avatar
        :name="option"
        :menu="menu"
        :menu-offset="option"
      />
    </div>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      offsets: [[20,20],[0,0],[100,100]],
      menu: [
        { id: 'profile', icon: 'user', text: 'My Profile' },
        { id: 'logout', icon: 'logout', text: 'Logout' }
      ]
    }
  }
}
</script>

Events

Avatar popover menu has one event @menuItemSelect, fired when the popover menu item is selected.

<template>
  <div style="background: #ACB5C9">
    <ci-avatar
      name="User Name"
      image="https://userstock.io/data/wp-content/uploads/2020/06/tyler-nix-PQeoQdkU9jQ-300x300.jpg"
      :menu="menu"
      @menuItemSelect='handleMenuItemSelect'
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 'profile', icon: 'user', text: 'My Profile' },
        { id: 'logout', icon: 'logout', text: 'Logout' }
      ],
    }
  },
  methods: {
    handleMenuItemSelect: (itemId) => {
      alert(itemId)
    }
  }
}
</script>