logo polydile dile-components

dile-avatar

Webcomponent to create a user avatar interface, configured on diferent ways, in order of preference:

When a image is provided, the component uses the image. If not, then the initial letter is used. If is not provided image nor initial, then the avatar shows a default user icon.

Installation

npm i @dile/dile-avatar

Usage

Import the component:

import '@dile/dile-avatar/dile-avatar.js';

Use the component:

<dile-avatar src="./images/user.jpg"></dile-avatar>

Properties

CSS Custom Properties

You can customize the avatar using this CSS Custom Properties.

Custom propertyDescriptionDefault
--dile-avatar-sizeThe size of the avatar36px
--dile-avatar-background-colorbackground color for the avatar. Is only visible when the image src is not provided#ddd
--dile-avatar-colorColor for the initial letter#888

dile-avatar demos

Avatar configured with an image

<dile-avatar src="/images/logo-polydile.png"></dile-avatar>

Avatar configured with an initial letter

<dile-avatar initial="j"></dile-avatar>

Avatar without configuration

<dile-avatar></dile-avatar>

Styled avatars

<style>
  #avatar {
    --dile-avatar-background-color: #936;
    --dile-avatar-color: #fff;
    --dile-avatar-size: 48px;
  }
</style>
<dile-avatar initial="M" id="avatar"></dile-avatar>

<style>
  #avatar2 {
    --dile-avatar-size: 48px;
    --dile-avatar-background-color: #eee;
  }
</style>
<dile-avatar src="/images/logo-polydile.png" id="avatar2"></dile-avatar>

<style>
  #avatar3 {
    --dile-avatar-size: 48px;
    --dile-avatar-background-color: #bef;
  }
</style>
<dile-avatar id="avatar3"></dile-avatar>