mirror of
https://github.com/directus/directus.git
synced 2026-02-01 12:45:02 -05:00
43 lines
1.1 KiB
Markdown
43 lines
1.1 KiB
Markdown
# Avatar
|
|
|
|
The avatar component can be used to display a person or something similar. It will generate a grey box in which either a
|
|
profile picture or an icon or text can be inserted.
|
|
|
|
```html
|
|
<v-avatar>RVZ</v-avatar>
|
|
|
|
<v-avatar>
|
|
<img src="..." />
|
|
</v-avatar>
|
|
|
|
<v-avatar>
|
|
<v-icon name="person" />
|
|
</v-avatar>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ------ | ------------------------- | ------- | --------- |
|
|
| `size` | Size in px | `null` | `Number` |
|
|
| `tile` | Render as a tile (square) | `false` | `Boolean` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ------------------------------------------------------- | ---- |
|
|
| _default_ | Default slot to display your elements inside the avatar | -- |
|
|
|
|
#### Events
|
|
|
|
n/a
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ------------------ | -------------------------- |
|
|
| `--v-avatar-color` | `var(--background-normal)` |
|
|
| `--v-avatar-size` | `48px` |
|