38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
|
<div class="docs-content" data-render>
|
||
|
|
# dp-avatar
|
||
|
|
|
||
|
|
Renders a circular user avatar image generated from a username seed (the local Multiavatar
|
||
|
|
service at `/avatar/multiavatar/{seed}`). A thin element wrapper around the `Avatar` helper.
|
||
|
|
|
||
|
|
Source: `static/js/components/AppAvatar.js`.
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| Attribute | Type | Default | Description |
|
||
|
|
|---|---|---|---|
|
||
|
|
| `username` | string | (required) | Seed used to generate and label the avatar. |
|
||
|
|
| `size` | integer | `24` | Width and height in pixels. |
|
||
|
|
|
||
|
|
Both attributes are observed: changing them re-renders the avatar.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```html
|
||
|
|
<dp-avatar username="alice_test" size="64"></dp-avatar>
|
||
|
|
```
|
||
|
|
|
||
|
|
No JavaScript is required - the element renders itself on connection.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="component-demo">
|
||
|
|
<div class="component-demo-title">Live example</div>
|
||
|
|
<div class="component-demo-stage">
|
||
|
|
<dp-avatar username="alice_test" size="32"></dp-avatar>
|
||
|
|
<dp-avatar username="bob_test" size="48"></dp-avatar>
|
||
|
|
<dp-avatar username="devplace" size="64"></dp-avatar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="module">
|
||
|
|
import "/static/js/components/AppAvatar.js";
|
||
|
|
</script>
|