Pyro

Appearance

Avatar ​

RC 0.7Kb

Circle showing inital(s) or image, typically associated with profiles or menus.

js
import 'pyro/avatar'
Preview Code Stackblitz
I

Usage ​

html
 <pyro-avatar>I</pyro-avatar>

With image ​

html
<pyro-avatar>
    <img slot="image"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Patates.jpg/2560px-Patates.jpg" />
</pyro-avatar>

Props ​

ts
interface AvatarProps {
  /** One/two letters, overriden by default slot */
  label?: string;
  onClick?: () => void;
  children?: any;
}

Slots ​

ts
/**
 * @slot - One/two letter, overrides label prop
 * @slot image - Images, scaled to fit, cropped to circle
 */

CSS prop theming ​

The size of the avatar can be defined by setting a *-width and *-height. It defaults to 1.5em x 1.5em.

The background color is under *-accent-color and the text color is *-text-color.

Full theming sheet ​

js
/**      {--specific-value = --default} - explanation `css-property`
 * @prop {--pyro-avatar-height = 1.5em} - size `height`
 * @prop {--pyro-avatar-width = 1.5em} - size `width`
 * @prop {--pyro-avatar-text-color = --pyro-text-color} - text `color`
 * @prop {--pyro-avatar-accent-color = --pyro-accent-color} - bg `background`
 */