A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
18
comments
17%
failed
2
coverage
100%

Avatar

avatar of atanasster

An image with some text, can be used as a user Avatar image

Component

import { Avatar } from 'grommet-controls';

Main

Adam Smithadmin
({
size,
title,
subTitle,
image,
}) => <Avatar image={image} title={title} subTitle={subTitle} size={size} />

Properties

Name
Description
Default
Controls
Image

Image to be displayed

string
-
Title

Main title(name) for the Avatar

string
-
Sub-title

Secondary title for the Avatar

string
-
contain

Adjust width/height if image is not square. By default, the image is cut off square

widthheight
-
plain

Whether this is a plain image with no border

boolean
-
round

How much to round the corners of the stamp

xsmallsmallmediumlargefull
-
Size

The size of the image stamp

mediumlargexlargexxlarge
-
src

The image source url

string
-

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
10/24/2019

atanasster

avatar of atanasster
add knobs to Avatar
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
4 commits

External dependencies

package
imports
peer
grommet
^2.15.0
TextBox
*
react
^17.0.1
React
*

Internal dependencies

file
imports
"../ImageStamp"
"./AvatarProps"
IAvatarProps

Component JSX

<Box
directionaligngap
>
grommet
^2.15.0
<ImageStamp
srcround
/>
ImageStamp
from"../ImageStamp"
<Box
justify
>
grommet
^2.15.0
<Text
weighttruncate
/>
grommet
^2.15.0
<Text
sizetruncate
/>
grommet
^2.15.0