Example 1
<nile-avatar name="Ravi Sankar" variant="text" id="not-rounded" [isRounded]="false" size="xl"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="lg" border-color="#68f466"> </nile-avatar>
<nile-avatar name="Ravi Sankar"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="sm"> </nile-avatar>
<nile-avatar isRounded> </nile-avatar>
<nile-avatar isRounded variant="icon" icon="action" text-color="red"> </nile-avatar>
<nile-avatar bg-color="#88d475" text-color="#4086ee" name="Alexa"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="sm"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="md"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="lg"> </nile-avatar>
<nile-avatar name="Ravi Sankar" size="xl"> </nile-avatar>Properties
| Name | Description | Type | Default |
|---|---|---|---|
| src | Url for the Image | String | '' |
| variant | Type of avatar | 'image' | 'text' | 'icon' | 'text' |
| icon | The icon in case of icon variant | string | 'user' |
| name | Name for the Avatar. | String | '' |
| bg-color | Gives the default bg color to the Avata. | String | |
| text-color | Gives the default text color to the Avatar. | String | '#fff' |
| border-color | Gives the default border color to the Avatar. | String | 'rgba(0, 0, 0, 0.08)' |
| size | Size of the Avatar. | 'sm' | 'md' | 'lg' | 'xl' | 'medium' |
| isRounded | Gives a border radius of 50% to the Avatar. | Boolean | true |
dependencies
This component automatically imports the following dependencies.
nile-avatar