DocSpace-client/web/ASC.Web.Components/src/components/avatar/README.md

31 lines
2.1 KiB
Markdown
Raw Normal View History

2019-06-18 13:20:49 +00:00
# Avatar
Used to display an avatar or brand.
### Usage
2019-06-18 13:20:49 +00:00
```js
import { Avatar } from "asc-web-components";
```
2019-06-18 13:20:49 +00:00
```jsx
<Avatar size="max" role="admin" source="" userName="" editing={false} />
2019-06-18 13:20:49 +00:00
```
If you want to create an avatar with initials, only _first letter of first two words_ of line is used.
### Properties
2019-06-18 13:20:49 +00:00
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :-------------------------------: | :----------: | -------------------------------------------------------- |
| `size` | `oneOf` | - | `max`, `big`, `medium`, `small` | `medium` | Size of avatar |
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | `user` | Adds a user role table |
| `source` | `string` | - | - | - | The address of the image for an image avatar |
| `userName` | `string` | - | - | - | Need to create an avatar with initials |
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
| `editLabel` | `string` | - | - | `Edit photo` | Label for editing layer |
| `editAction` | `func` | - | - | - | Function called when the avatar change button is pressed |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |