-</code></pre><h2>Props</h2><table class=table><thead><tr><th>Name</th><th>Required</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>username</td><td>Y</td><td>-</td><td>String</td><td>The user name that will be used to compute user initial.</td></tr><tr><td>initials</td><td>N</td><td>-</td><td>String</td><td>Force the displayed initials by overriding the computed ones.</td></tr><tr><td>src</td><td>N</td><td>-</td><td>String</td><td>Path to the avatar image to display.</td></tr><tr><td>:customStyle</td><td>N</td><td>-</td><td>Object</td><td>A custom style object to override the base styles.</td></tr><tr><td>backgroundColor</td><td>N</td><td>-</td><td>String</td><td>The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.</td></tr><tr><td>color</td><td>N</td><td>-</td><td>String</td><td>The font color used to render the user initials. If none is provided, the background color is used to compute the font color.</td></tr><tr><td>:lighten</td><td>N</td><td>80</td><td>Number</td><td>A factor by which the background color must be lightened to produce the font color. Number between [-100,100].</td></tr><tr><td>:size</td><td>N</td><td>50</td><td>Number</td><td>The avatar size in pixel.</td></tr><tr><td>:rounded</td><td>N</td><td>true</td><td>Boolean</td><td>True for a rounded avatar.</td></tr></tbody></table><h2>Event</h2><table class=table><thead><tr><th>Name</th><th>Arguments</th><th>Description</th></tr></thead><tbody><tr><td>@avatar-initials</td><td>username (the value of the username props), initials (the value of the computed initials or the initials props if any)</td><td>This event is trigger when the component is ready with component username and initial.</td></tr></tbody></table><h2>Examples</h2><table class=table><thead><tr><th></th><th>Code</th></tr></thead><tbody><tr><td><avatar username="Hubert-Félix Thiéfaine"></avatar></td><td><pre><code class=language-html><avatar username="Hubert-Félix Thiéfaine"></avatar></code></pre></td></tr><tr><td><avatar username="Hubert-Félix Thiéfaine" background-color=#FFC107 :size=100 :rounded=false :lighten=20></avatar></td><td><pre><code class=language-html><avatar username="Hubert-Félix Thiéfaine"
0 commit comments