Avatar component

How to use

import { Avatar } from '@getfly-ui/avatar';

OR

import { Avatar } from 'getfly-ui';

Props

Avatar.Outline

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | ref | Ref<HTMLImageElement> or undefined | | | | key | Key or null or undefined | | | | className | string or undefined | | ClassName css | | color | string or undefined | | Background color css | | preset | enum | 'medium' | Size kích thước của button (small, medium, large) | | useMergeClass | boolean or undefined | true | Use merge className | | colorTheme | enum | | Background color theme | | icon | enum | 'user_filled' | Icon name | | iconColorTheme | enum | 'cerulean-700' | Icon color theme | | iconColor | string or undefined | | Icon color | | borderWidth | number or undefined | 1 | Border width css | | borderColorTheme | enum | 'grayscale-300' | Border color theme | | borderColor | string or undefined | | Border color css | | borderStyle | enum | 'solid' | Border style css |

Avatar.Image

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | ref | Ref<HTMLImageElement> or undefined | | Ref image | | key | Key or null or undefined | | | | src | string or undefined | | The path of the image | | className | string or undefined | | ClassName css | | color | string or undefined | | Background color css | | preset | enum | 'medium' | Size kích thước của button (small, medium, large) | | useMergeClass | boolean or undefined | true | Use merge className | | colorTheme | enum | | Background color theme | | useFallback | boolean or undefined | false | Image error => show fallback | | fallback | string or undefined | | Text preview | | fallbackId | number or undefined | | Number hash color | | textColorTheme | enum | 'white' | Text color by theme | | textColor | string or undefined | | Text color | | objectFit | enum | 'cover' | object-fit css | | onLoadingStatusChange | ((status: ImageLoadingStatus) => void) or undefined | | Check src isset |

Avatar.Group

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | preset | enum | 'medium' | Size kích thước của button (small, medium, large) | | useMergeClass | boolean or undefined | true | Use merge className | | useTooltip | boolean or undefined | | Use tooltip label | | className | string or undefined | | ClassName css | | data | ListItem[] | [] | List avatar | | limit | number or undefined | 4 | Limit avatar | | otherColorTheme | enum | 'grayscale-200' | Other Color theme | | otherColor | string or undefined | | Other color | | otherTextColorTheme | enum | 'grayscale-1000' | Other text color theme | | otherTextColor | string or undefined | | Other text color | | showAdd | boolean or undefined | | Show add | | icon | enum | | Icon name | | iconAddColor | string or undefined | | Icon add color | | iconAddColorTheme | enum | 'grayscale-550' | Icon add color theme | | iconAddBorderStyle | enum | 'dashed' | Icon add border style | | iconAddBorderWith | number or undefined | | Icon add border width | | iconAddBorderColor | string or undefined | | Icon add border color | | iconAddBorderColorTheme | enum | 'grayscale-550' | Icon add border color theme | | iconAddTooltipText | string or undefined | | Icon add tooltip text | | onClickOther | (() => void) or undefined | | onClick other | | onClickAdd | (() => void) or undefined | | onClick add |