npm i @snack-uikit/avatar
import { Avatar } from "@snack-uikit/avatar";
<Avatar
name="Name Surname"
src="path-to-avatar/image.jpg"
size='xl'
/>
<Avatar
name="Name Surname"
appearance='pink'
indicator='violet'
shape='square'
showTwoSymbols={true}
/>
Компонент отображения аватара пользователя.
name | type | default value | description |
---|---|---|---|
name* | string |
- | Имя |
src | string |
- | src аттрибут изображеня |
appearance | enum Appearance: "red" , "orange" , "yellow" , "green" , "blue" , "violet" , "pink" , "neutral"
|
red | Внешний вид |
size | enum Size: "xxs" , "xs" , "s" , "m" , "l" , "xl" , "xxl"
|
s | Размер |
shape | enum Shape: "round" , "square"
|
round | Форма: круглая или квадратная |
indicator | enum Appearance: "red" , "orange" , "yellow" , "green" , "blue" , "violet" , "pink" , "neutral" , "primary"
|
- | Индикатор |
showTwoSymbols | boolean |
- | Отображение двух заглавных символов имени |
className | string |
- | CSS-класс |